jQuery插件实现图片轮播特效

好了废话不多说了，先看看效果图。

HTML部分：

Box">

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 += '<div class="sliderBtn">

';
}
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
},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','block');
clearInterval(timer);

},function () {
$('.prev','none');
$('.next','none');
timer = setInterval(ani,1);
})
$('.next').click(function () {
flag && ani(1,1);
})
$('.prev').click(function () {
flag && ani(0,1);
})
})
}
})(jQuery)

以上就是差不多所有的代码了，一些比较关键的地方已经用注释好了，这里就不再叙述。

源码下载：

精彩专题分享：

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

jQuery插件实现图片轮播特效

猜你在找的jQuery相关文章