jQuery实现友好的轮播图片特效

先上效果图：

【处理】 这里的图片滚动轮播，做了点小处理：当在第一页状态时，你点击第5页，图片的滚动是一张滑过，而不是从2-3-4-5(这种的多张滚动，看得头晕眼花);

实现的做法是：

剩下的就是源代码分享了：

- css -

复制代码代码如下：gy-滑动-滚动{相对位置：宽度： 320 px高度： 200像素；飞越：隐藏；左侧： 50%;边距-左侧：-160像素；} .gy-滑动-滚动ul {位置：绝对值；左： 0；top : 0；} .gy-slide-BTN { margin-top : 10px；文本对齐：中心；padd : 5px 0；} .gy-slide-btn span .gy-slide-BTN I { margin-left : 5px；字体样式：正常；font:12px/1 tahoma，arial，' Hiragino Sans GB '，\ 5b8b \ 4f53cursor:指针；border: 1px固体# cccpadding: 4px 6px}。gy-slide-btn .gy-slide-cur {底色： # 999；color: # fff}。gy-slide-btn .gy-slide-no { color : # CCC；光标：默认值；}

- HTML -

复制代码代码如下： div id=' gy-slide ' div class=' gy-slide-scroll ' ul lia href=' # ' img src=' http : img/n1。jpg ' alt=' '/a/Li lia href=' # ' img src=' http : img/N2。jpg ' alt=' '/a/Li lia href=' # ' img src=' http : img/n3。jpg ' alt=' '/a/Li首页/I I class=' gy-slide-prev gy-slide-no '上一页/跨度=gy-slide-cur 1/跨度跨度2/跨度跨度跨度3/跨度跨度跨度4/跨度跨度跨度5/跨度I=gy-slide-next下一页/i i class='gy-slide-end '尾页/i /div /div

- JS -

复制代码代码如下：/* - 使用说明结构必需一致；多次调用时，最外层赋予不同的编号或类名即可*//* - 参数@换行[字符串]外层元素的类名或id @ auto[布尔值]不设置默认是不自动播放；设置为没错，自动播放@速度[数字]每隔几秒图片切换，默认是四秒*/函数Gy _ slider(opt){ this。wrap=$(opt。包裹)；this.scroll=this.wrap.find(' .gy-滑动-滚动ul '；这个。李=这个。卷轴。find(' Li ')；this.btn_num=this.wrap.find(' .gy-slide-BTN跨度'；this.btn_home=this.wrap.find(' .gy-slide-home’)；this.btn_end=this.wrap.find(' .gy-slide-end '；this.btn_prev=this.wrap.find(' .gy-slide-prev ')；this.btn_next=this.wrap.find(' .gy-slide-next’)；这个。索引=0；//索引这个。refer=0；this.ctrl=truethis。len=这个。李。长度；this . move _ w=this . roll . parent().宽度();this.auto=opt.auto==true？真的：假的。速度=选择。速度| | 4；这个。init()；} Gy _ slider。prototype={ img show : function(I，callback){ var _that=this，_ w=0；switch(true){ case ithis。参考： _ w=-这个。move _ w；打破；案例i==this .参考：返回打破；default : _ w=this . move _ w } this。参考=我；this.li.eq(i).css({'position':'absolute '，' left':_w 'px '，' top ' :0 })；this.scroll.stop(真，真)。animate({'left':-_w 'px'}，function(){ _ that。卷轴。CSS({ ' left ' :0 })；_that.li.attr('style '，').方程式(I ).css({'position':'absolute '，' left':0，' top ' :0 })；如果(回调类型==' function '){ callback()；} });这个。BTN。删除类(' gy-slide-cur ').方程式(I ).添加CLaSS(' gy-slide-cur ')；}，isc TRL : FuncTion(n){ this。BTN _普雷夫。加上(这个。下一个是BTN .删除CLaSS(' gy-slide-no ')；if(n==0){ this。BTN _普雷夫。add CLaSS(' gy-slide-no ')；} else if(n==(this。len-1)){这个。下一个是BTN。add class(' gy-slide-no ')；} }，BTN click : function(){ var _ that=this；//页码处理这个。BTN。单击(function(){ if(_)即。BTN。索引($(this))===_ that。索引)返回；if(！_that.ctrl)返回；_ that.ctrl=false_ that。index=_ that。BTN。索引($(this))；_那个。Isctrl(_那个。索引)；_that.imgShow(_that.index，function(){ _ that。ctrl=true});});//首页这个。BTN _家。单击(function(){ _ that)。索引=0；_那个。Isctrl(_那个。索引)；_那个。imgshow(_那个。索引)；});//尾页这个。BTN _ end。单击(function(){ _ that)。index=_ that。len-1；_那个。Isctrl(_那个。索引)；_那个。imgshow(_那个。索引)；});//上一页这个。BTN _普雷夫。单击(function(){ if($(this)).hasClass('gy-slide-no ')返回；if(！_that.ctrl)返回；_ that.ctrl=false_ that。索引-；_那个。Isctrl(_那个。索引)；_that.imgShow(_that.index，function(){ _ that。ctrl=true});});//下一页这个。下一个是BTN。单击(function(){ if($(this)).hasClass('gy-slide-no ')返回；if(！_that.ctrl)返回；_ that . ctrl=false _ that . index _ that。Isctrl(_那个。索引)；_that.imgShow(_that.index，function(){ _ that。ctrl=true});});

}，autoplay :函数(){ var _ that=this如果(这个。定时器)clearInterval(这个。计时器)；这个。timer=setInterval(function(){ _ that。指数；如果(_那。index==_ that。len){ _那。索引=0；} _那个。Isctrl(_那个。索引)；_那个。imgshow(_那个。索引)；}，这个。速度* 1000)；}，init :函数(){ var _ that=this这个。BTN click()；如果(这个。自动){这个。autoplay()；这个。包起来。hover(function(){ clearInterval(_)即。计时器)；}，function(){ _ that。autoplay()；});} }}

代码很简洁，效果却非常棒，也很实用，小伙伴们自己美化下就可以使用到自己的项目中了。