• JS

    蛋疼,写个jquery图片切换插件

    by on 2013年05月3日

基本原理:
setInterval定时执行切换的方法,然后使用jquery的animate方法实现动画效果。作为coder,还是看代码吧。

演示地址http://mudsky.com/resource/slide.html

结构代码:

<div>
<ul>
<li><a href=”#”><img src=”upload/ad_1.jpg” alt=”” /></a></li>
<li><a href=”#”><img src=”upload/ad_2.jpg” alt=”” /></a></li>
<li><a href=”#”><img src=”upload/ad_3.jpg” alt=”” /></a></li>
</ul>
<div><em>1</em><em>2</em><em>3</em></div>
</div>

样式需要自己写:
.slide { width:688px; height:74px; overflow:hidden; position:relative;}
.slide ul { padding:0;}
.slide li { float:left; width:688px; height:74px; list-style:none;}
.slide li img { display:block;}
.num { position:absolute; text-align:right; right:0; bottom:0;}
.num em { font-style:normal; display:inline-block; width:20px; height:20px; text-align:center; background:#333; color:#fff; opacity:0.8; margin:0 2px; cursor:pointer;}
.num em.cur { background:#900;}
.slide_2 { margin-top:30px;}

js 调用:
(function(){
$(‘.slide_1’).tzScroll();
$(‘.slide_2’).tzScroll({
direction: ‘top’,
effectTime: 700
});
})()