巩固知识又做一遍轮播图。方法有点不同,思路都是一致的。
功能:①页面初始,5张图片1秒依次播放(与之前不同的是:之前是缓慢移动每次加固定像素,这次的是每次就展现一张图片,没有缓慢移动的步骤)
②事件绑定:1.鼠标移入:轮播停止;鼠标移出:轮播继续。
2.prev前一个按钮:点击图片向前播放;next后一个按钮:点击图片向后播放。
3.跟随图片序号,底部序号依次变换状态。
实现图片:
注意:
1.需要获取到图片序号,在点击next按钮的时候,需要将当前图片序号+1,也可以理解为不在定时器中的轮播。所以可以将定时器中的运动函数分离出来,简化页面;
2.设置全局变量index。
3.因为,底部序号是和框内图片序号对应的,完全可以共用一个index。
function moveNext(){
Btnindex++;
//判断:到最后一个时候,index再加1就超出了界限
if(Btnindex>=5){
Btnindex = Btnindex-5;
}
list.style.left = -520*Btnindex+'px';
//当前序号的底部按钮设置样式,其他都去除样式。
for(var i = 0; i <oBtn.length; i ++){
oBtn[i].className = " ";
}
oBtn[Btnindex].className = "current";
}
在开头就可以这样写:
//函数执行
moveImg();
//函数定义
function moveImg(){
timer = setInterval(moveNext,1000);
}
鼠标移出的时候继续执行:
container.onmouseout = function(){
moveImg();
};
前一个按钮:prev
prev.onclick = function(){
Btnindex--;
if(Btnindex<0){
Btnindex = Btnindex+5;
}
list.style.left = -520*Btnindex+'px';
for(var i = 0; i <oBtn.length; i ++){
oBtn[i].className = " ";
}
oBtn[Btnindex].className = "current";
}
后一个图片按钮:next
next.onclick = moveNext;