还记得以前刚接触前端的时候，浏览各大网站，很多都少不了的有个轮播的效果，那个时候自己是一个彻彻底底的小白，想着这些图片滚动起来还真是有意思，是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了，觉得这些也是so easy的嘛，于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法，就有了jQuery插件之路这样一个系列，当然为了纪念当初对轮播的执念，于是就从轮播开始写了一个小小的插件，这只是一个开始，随着后面的了解的更多，也会写一些更加绚丽的DEMO。有兴趣的朋友可以去看下吧。
好了废话不多说了，下面附上代码。
HTML部分：
CSS部分：
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,.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,.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部分：
方法
var defaultSetting = {
width : 640,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',li = $('li',ul),img = $('img',li),len = li.size(),mask = $('.mask',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 += '
以上代码是小编给大家介绍的jQuery图片轮播插件代码，希望对大家有帮助，如果大家有疑问欢迎给我留言小编会及时回复大家的的，在此也非常感谢大家对编程之家网站的支持！
