易网时代-编程资源站
易网时代-编程资源站 
HTML部分：
<div class="slider"><div class="ul-box"> <ul><li><a href="javascript:;"><img src="img/1.jpg"/></a></li><li><a href="javascript:;"><img src="img/2.jpg"/></a></li><li><a href="javascript:;"><img src="img/3.jpg"/></a></li><li><a href="javascript:;"><img src="img/4.jpg"/></a></li><li><a href="javascript:;"><img src="img/5.jpg"/></a></li><li><a href="javascript:;"><img src="img/6.jpg"/></a></li> </ul></div><div class="mask"></div><div class="prev"><img src="img/btn_l.png"/></div><div class="next"><img src="img/btn_r.png"/></div> </div> <script src="js/jquery-1.11.3.js"></script> <script src="js/slider.js"></script> <script>$（".slider"）.slider（{ width : 640,height : 270,during : 2000, //动画执行间隔 speed : 500, //动画速度 btnSize : 20, //底部遮罩层的按钮大小 btnSpace : 10, //底部的按钮间隙 direction : 1 //轮播方向默认为1，图片向左移动}）; </script> CSS部分： *{ margin: 0; padding: 0; box-sizing: border-box;}.slider{ position: relative; overflow: hidden;}.slider ul{ list-style: none; float: left;}.slider ul li{ float: left;}.slider .mask{ position: absolute; bottom: 0; width: 100%; background-color: rgba（0, 0, 0, .3）;}.slider .mask .sliderBtn{ position: absolute; border-radius: 50%; background-color: #fff; cursor: pointer; background: radial-gradient（white 20%, transparent 50%）;}.slider .prev, .slider .next{ position: absolute; width: 45px;height: 100%; background-color: rgba（0, 0, 0, .2）; cursor: pointer; top: 0; display: none;}.slider .prev{ left: 0;}.slider .next{ right: 0;}.slider .prev img, .slider .next img{ position: absolute; top: 50%; left: 50%; margin-top: -22.5px; margin-left: -22.5px;} JS部分： （function （$） { $.fn.slider = function （setting） { //给jQuery的实例对象绑定一个slider方法var defaultSetting = { width : 640, height : 270, during : 3000, speed : 500, btnSize : 30, btnSpace : 10, direction : 1}setting = $.extend（true, {}, defaultSetting, setting）; //用传入的参数替换掉默认的设置 return this.each（function （i, item） {var _setInterval = window.setInterval;window.setInterval = function （callback, timer, param） { //重写setInterval函数，让其可以传参var args = Array.prototype.slice.call（arguments, 2）; var _fn = function （） { callback.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,//用来控制按钮的下标 flag = true,//标识动画是否执行完成 gap,//执行动画的按钮下标和当前按钮的下标的差 timer; //计时器 _this.width（setting.width）.height（setting.height）; ulBox.width（setting.width * 3 * len）.height（setting.height）.css（{marginLeft: -setting.width * len }）; ul.width（setting.width * len）.height（setting.height）; img.width（setting.width）.height（setting.height）; mask.height（setting.btnSize + 2 * setting.btnSpace）; //添加btn for（var i = 0, str = ""; i < len; i++）{str += "<div class="sliderBtn"></div>"; } mask.html（str）; var ulFir = ul.clone（true）; var ulSec = ul.clone（true）; var sliderBtn = $（".sliderBtn", ".mask"）; ulBox.append（ulFir）; ulBox.append（ulSec）; sliderBtn.each（function （i, item） {$（item）.css（{ width : setting.btnSize, height : setting.btnSize, top : setting.btnSpace, left : parseInt（setting.width - （setting.btnSize + setting.btnSpace *2） *len, 10） /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace}）;$（item）.mouseenter（function （） { gap = Math.abs（i - index）; i > index ? （flag && ani（1, gap）） : （flag && ani（0, gap））;}） }）; btnAni（0）; //按钮样式变化 function btnAni （index） {$（".sliderBtn"）.css（"background", "radial-gradient（white 20%, transparent 50%）"）;$（".sliderBtn"）.eq（index）.css（"background", "radial-gradient（white 10%, transparent 30%, white 70%）"）; } //动画 function ani （direction, num） {if（flag）{ //默认1向左运动，0向右运动 flag = false; var ulfir = $（"ul", ulBox）.eq（0）; var left = parseInt（ulfir.css（"margin-left"）, 10）; if（direction）{index += num;index = index % len;left = left - num * setting.width;ulfir.animate（{ marginLeft: left}, setting.speed, function （） { if（left <= -len * setting.width）{ulfir = ulfir.remove（）;ulfir.css（"margin-left", 0）;ulBox.append（ulfir）; } flag = true;}）; }else{index -= num;index = index <= -1 ? len - 1 : index;left = left + num * setting.width;ulfir.animate（{ marginLeft: left}, setting.speed, function （） { if（left >= len * setting.width）{var ulLast = $（"ul", ulBox）.eq（2）.remove（）;ulLast.css（"margin-left", 0）;ulBox.prepend（ulLast）;ulfir.css（"margin-left", 0）; } flag = true}） } btnAni（index）} } //定时器 timer = setInterval（ani, setting.during, setting.direction, 1）; _this.hover（function （） {$（".prev", this）.css（"display", "block"）;$（".next", this）.css（"display", "block"）;clearInterval（timer）; }, function （） {$（".prev", this）.css（"display", "none"）;$（".next", this）.css（"display", "none"）;timer = setInterval（ani, setting.during, setting.direction, 1）; }） $（".next"）.click（function （） {flag && ani（1, 1）; }） $（".prev"）.click（function （） {flag && ani（0, 1）; }）}） }}）（jQuery） 以上就是差不多所有的代码了，一些比较关键的地方已经用注释好了，这里就不再叙述。