jQuery实现的网站banner图片无缝轮播效果完整实例

2020-05-23 06:03:45易采站长站整理

self.go(self.width);
})
}
// 手动创建按钮元素
this.NextBtn=function(){
var self=this;
var ele=$("<a href='javascript:;' id='nextBtn'>></a>");
self.append(ele)
$('#nextBtn').bind("click",function(){
self.go(-self.width);
})
}
// 手动创建小圆点
this.circle=function(){
var self=this;
var ele=$('<div id="circle-wrap"></div>');
for(var i=0;i<self.length-2;i++){
$('<a class="dot" href="javascript:;" rel="external nofollow" ></a>').appendTo(ele)
}
ele.css({
"position":"absolute",
'bottom':'0',
'right':'0',
'left':'0',
'height':'20px',
"padding":"0 10px",
'text-align':self.options.circleAlign
});
self.append(ele);
self.playCircle(this.num-1);
}
//小圆点指定当前项
this.playCircle=function(num){
$('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
}
// 点击小圆点
this.clickCircle=function(){
var self=this;
$('#circle-wrap').find('.dot').on('click',function(){
self.num=$(this).index()+1;
self.circlePlay()
})
}
// 点击小圆点,图片切换
this.circlePlay=function(){
self.flag=true;
if(self.flag){
self.flag=false;
$(self.options.boxWrap).stop().animate({
'left':-self.num*self.width
},self.options.speed,function(){
self.flag=true;
});
}
self.playCircle(this.num-1);
}
// 点击按钮,进行轮播,以及自动轮播
this.go=function(offset){
var self=this;
if(self.flag){
self.flag=false;
if(offset<0){
self.num++;
if(self.num>self.length-2){
self.num=1;
}
}
if(offset>0){
self.num--;
if(self.num<=0){
self.num=self.length-2
}
}
if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){
$(self.options.boxWrap).css({
'left':-self.width
});
}
if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){
$(self.options.boxWrap).css({