jQuery图片轮播插件——前端开发必看

还记得以前刚接触前端的时候，浏览各大网站，很多都少不了的有个轮播的效果，那个时候自己是一个彻彻底底的小白，想着这些图片滚动起来还真是有意思，是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了，觉得这些也是就这么简单的嘛，于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法，就有了框架插件之路这样一个系列，当然为了纪念当初对轮播的执念，于是就从轮播开始写了一个小小的插件，这只是一个开始，随着后面的了解的更多，也会写一些更加绚丽的演示。有兴趣的朋友可以去看下吧。

先给大家附上效果图，如果大家感觉还不错，请参考实现代码

好了废话不多说了，下面附上代码。

超文本标记语言部分：

div class=' slider ' div class=' ul-box ' ullia href=' JavaScript :'img src=' http : img/1。jpg '/a/lilia href=' JavaScript :'img src=' http : img/2。jpg '/a/lilia href=' JavaScript :'img src=' http : img/3。jpg '/a/lilia href=' JavaScript :'img src=' http : img/4。jpg '/a/lilia href=' JavaScript :'img src=' http : img/5。jpg '/a/lilia href=' JavaScript :'img src=' http : img/6。jpg '/a/Li/ul/div class=' mask '/div class=' prev ' img src=' http : img/BTN _ l . png '/div class=' next ' img src=' http : img/BTN _ r . png '/div/div脚本src=' http 3360 js/jquery-1。11 .3 .射流研究…滑块')。滑块({宽度： 640,高度： 270,在： 2000期间，//动画执行间隔速度： 500,//动画速度btnSize : 20，//底部遮罩层的按钮大小btnSpace : 10，//底部的按钮间隙方向： 1 /轮播方向默认为1,图片向左移动});/scriptCSS部分：

* { margin : 0；padd : 0；盒子尺寸：边框盒子；}.滑块{位置：相对；飞越：隐藏；}.滑块ul {列表式：无；向左浮动：}.滑块ul li {左侧浮动：}.滑块掩模{位置：绝对值；底部： 0；宽度： 100%;背景-color: rgba(0，0，0，3);}.滑块。面具滑动rbtn {绝对位置：边界半径： 50%;背景-color : # fff；光标：指针；背景：径向渐变（白色20%,透明50%);}.滑块。上一个。滑块下一个{位置：绝对值；宽度： 45px高度： 100%;背景-color: rgba(0，0，0，2);光标：指针；top : 0；显示器：无；}.滑块prev { left : 0；}.滑块。下一个{右： 0；}.滑块。上一个img .滑块。下一个img { position : absolute top : 50%；左侧： 50%;边距-top :-22.5 px；左边距：-22.5像素；}JS部分：

（函数($) {$.fn.slider=函数（设置){ //给框架的实例对象绑定一个滑块方法var默认设置={宽度： 640，高度： 270，期间： 3000，速度： 500，btnSize : 30，btnSpace : 10，方向： 1 }设置=$ .extend(true，{}，defaultSetting，setting)；//用传入的参数替换掉默认的设置返回每个(函数(I，item){ var _ setInterval=window。setIntervalwindow.setInterval=函数（回调、计时器、参数){ //重写setInterval函数，让其可以传参var args=数组。原型。切片。呼叫(参数，2);var _ fn=function(){回调。apply(null，args)；}return _setInterval(_fn，timer)；}var _this=$(this)，ulBox=$(' .ul-box '，this)，ul=$('ul '，this)，li=$('li '，ul)，img=$('img '，li)，len=li.size()，mask=$(').mask '，this)，index=0，//用来控制按钮的下标标志=真，//标识动画是否执行完成gap，//执行动画的按钮下标和当前按钮的下标的差计时器；//计时器_this.width(setting.width).高度（设置。高度);乌尔博克斯。宽度(设置。宽度* 3 *透镜).高度（设置。高度)。CSS({左边距：-设置。width * len })；ul.width(setting.width * len).高度（设置。高度);img.width(设置. width).高度（设置。高度);面具。高度(设置。BTN尺寸2 *设置。BTN空间)；//添加btnfor(var i=0，str=我透镜；I){ str=' div class=' sliderBtn '/div '；}面具。html(字符串)；var ulFir=ul.clone(真);var ulSec=ul.clone(真);var sliderBtn=$(' .sliderBtn '，' .mask’)；乌尔博克斯。追加(Ulfir)；乌尔博克斯。追加(Ulsec)；sliderBtn。每个（函数(一，项){$(项)).css({width : setting.btnSize，height : setting.btnSize，top : setting.btnSpace，left : parsent(setting。宽度-(设置。BTN尺寸设置。BTN空间* 2)*透镜，10)/2设置。BTN大小*我设置。BTN空间* 1 * 2设置。BTN空间})；$(物品)。鼠标输入(函数(){ gap=Math。指数；我索引？(flag ani(1，gap)) : (flag ani(0，gap))；})});btnAni(0)；//按钮样式变化函数btnAni(索引){$(').滑动rbtn’).css(“”背景','径向渐变（白色20%,透明50%)');$('.滑动rbtn’).eq(指数)。css(“”背景','径向渐变（白色10%,透明30%,白色70%)');}//动画函数ani(方向，数量){if(标志){//默认一向左运动，0向右运动flag=falsevar ulfir=$('ul '，ulBox).eq(0)；var left=ParSeint(ulfir。CSS('左边距')，10)；if(direction){ index=num；索引=索引% lenleft=left-num *设置。宽度；超低频红外。animate({左边距：左}，setting.speed，function(){ if(left=-len * setting。宽度){ ulf IR=ulf IR。移除()；ulfir.css('margin-left '，0)；乌尔博克斯。追加(ulf IR)；}标志=真；});} else { index-=num；index=index=-1？len - 1 :指数；left=left num * setting . width ulfir。animate({左边距：左}，setting.speed，function(){ if(left=len * setting。宽度){ var ulLast=$(' ul '，ulBox).等式(2)。移除();ulLast.css('左边距，0);乌尔博克斯。prepend(UllaST)；ulfir.css('margin-left '，0)；}flag=true})}btnAni(index)}}//定时器timer=setInterval(ani，setting.during，setting.direction，1)；_this.hover(function () {$(').' prev '，这个)。css('display '，' block ')；$('.'下一个，这个)。css('display '，' block ')；clearInterval(计时器);}，function () {$(' .' prev '，这个)。css('display '，' none ')；$('.'下一个，这个)。css('display '，' none ')；timer=setInterval(ani，setting.during，setting.direction，1)；})$('.下一个')。click(function () {flag ani(1，1))；})$('.prev ').click(function () {flag ani(0，1)；})})})))(jQuery)以上代码是小编给大家介绍的框架图片轮播插件代码，希望对大家有帮助，如果大家有疑问欢迎给我留言小编会及时回复大家的的，在此也非常感谢大家对我们网站的支持！