js图片轮播插件的封装

本文为大家分享了射流研究…图片轮播插件的具体代码，供大家参考，具体内容如下

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。

钢性铸铁样式。车身{宽度： 700像素；余量： 100像素自动；相对位置：高度： 300像素飞越：隐藏；} .车身img {宽度： 700px绝对位置：显示器：无；} .车身ul { position : absolutebotom : 3px左侧： 50%;transform : translateX(-50%)；} .正文li{ list-style:无；向左浮动：宽度： 15px高度： 15px边界半径： 50px背景：无；border: 2px实心# fffmargin-right : 10px；光标：指针；} .活动{背景-color: #fff！重要；} .正文a { text-decoration : none绝对位置：显示器：块；前：名50%；transform : translateY(-50%)；高度： 50px宽度： 30px背景尺寸： 100% 60%;背景-color: rgba(0，0，0，0.3)；} .左{左： 0；背景： url('./img/left.png ')无重复中心中心；} .右{右： 0；背景： url('./img/right.png ')无重复中心中心；}页面结构超文本标记语言代码

body div class=' body ' img src=' http : img/1。jpg ' img src=' http : img/2。jpg ' img src=' http : img/3。jpg ' ul Li class=' active '/Li Li/Li/ul a href=' JavaScript :class=' left '/a a href=' JAVAScript :class='right'/a /divjs部分，插件调用

脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。8 .0 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/slider。js /脚本脚本类型='text/javascript' $ .滑块({ imgElement:$(').body img ')，liElement: $(' .body li ')，leftBtn:$(' .左')、右Btn:$(' .右')、时间：2000 })/脚本封装的插件

（函数($){函数滑块（选项){ this.opts=$ .extend({}，slider.defaluts，options)；这个. IMgslider()；} //设置默认值滑块。默认值={ imgelement : null，liElement:null，leftBtn:null，rightBtn:null，time :2000 }滑块。原型。_ imgSlider=function(){ var opts=this。opts，index=0，len=opts.imgElement.length，timeInter=null if(opts . imgelement==' ')返回；opts.imgElement.eq(0).show()；显示时间()；//当鼠标经过轮播停止，移开继续选择。imgelement。悬停(函数(){ clearInterval(时间间隔))；}，function(){ show time()；});//点击里显示对应的图片选择。LiElement。点击(函数(){ var id=$(this)).index()；show(id)；});//向左向右选择。离开了BTN。单击(function(){ clearInterval(时间间隔))；-索引；index=Math.max(0，index)；显示（索引);显示时间()；});选择。对，BTN。单击(function(){ clearInterval(时间间隔))；指数；index=Math.min(len-1，index)；显示（索引);显示时间()；});函数show time(){ time inter=setInterval(函数(){ indexif(index len){ index=0；} show(index)；}，选择。时间)；}函数显示(索引){ opts。IMgelement。情商(指数).法丁(1000)。兄弟姐妹(' img ').淡出(1000)；opts.liElement.eq(索引)。addClass('active ').兄弟姐妹('里').移除CLaSS(' active ')；} } $.extend({ slider:function(选项){新滑块(选项));} })})(jQuery)效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。