1、图片:图片在第一张图前面放置最后一张图,在最后一张图后面放上第一张图
<img src="images/3.jpg" class=" img-responsive ">
<img src="images/1.jpg" class=" img-responsive">
<img src="images/2.jpg" class=" img-responsive ">
<img src="images/3.jpg" class=" img-responsive ">
<img src="images/1.jpg" class=" img-responsive ">
2、宽度:包裹的图片的父元素,宽度=(所有图片宽度)*(所有图片个数)
(注:在这里我给自己挖了两个大坑,第一,在调试向后箭头和向前箭头时,无法做到无缝连接(原因我将来宽度设置=(图片宽度*3));第二,动画时,点击向后箭头到最后一张图却换至第一张时,出现空白区域(原因:总宽度=图片宽度*4))
#roll{
position: absolute;z-index: 1;width: 500%;left: -100%;}
#roll img{float: left;}
3、圆点按钮:计算移动距离值;结束后赋值圆点index
//点击时按钮index值
let sum = $(item).attr('index');
//移动距离
let offset= -(width*(sum -index)) ;
//调用位移函数
animate(offset);
//将点击后按钮index的值,赋值
index = sum;
4、动画:每次位移量(speed)=位移长度/(设置总位移时间/每一次唯一的间隔),添加动画函数狗go(), setTimeout调用自身,定时器判断条件(向左:speed>0 && (现在的位置 <目标位置);向右:speed <0 && (现在位置 > 目标位置)
//移动偏移量
function animate(offset){
let newleft = parseInt($('#roll').css('left')) + offset ;
let time =300;//总的位移时间
let interval =10;//位移间隔时间
let speed = offset/(time/interval);//每次位移量
animated = true;
//动画函数
function go(){
let nowLeft = parseInt($('#roll').css('left'));//现在的位置
if((speed > 0 && nowLeft < newleft)|| (speed < 0 && nowLeft > newleft)){//判断是否达到目标值
$('#roll').css({'left':nowLeft+speed +'px'});
setTimeout(go,interval);
}else{
$('#roll').css({'left':newleft+'px'}) ;
if(newleft > - (width)){
$('#roll').css({'left':-(3*width)+'px'}) ;
}
if(newleft < (-3*width)){
$('#roll').css({'left':-width +'px'}) ;
}
}
animated =false;
}
go();
}
5、防止多次点击出现多次动画效果后的bug:设置正在点击的标志位,go()函数执行完成之后设置为false;在设置点击事件时,判断标志位是否为真,if(true)return;
$('#next').click(() =>{
if (animated)return;
if(index == 3){index =1;
}else{index +=1;}
animate(-width);
showbotton(index);
});