在动手写之前,先来分析一下
可以看到的是轮播图的执行方式主要有两种,一种是通过左边的按钮来进行切换图片,一种是通过右边的按钮来进行切换。下面我们就来分析一下通过右边的按钮来切换图片。
- 右边按钮
首先我们定义一个变量index,当我们点击右边按钮的时候,index需要加1。但是这个index也不能无限的去增加,不然的话当我们的index超过轮播图里面放的图片数量的时候,它就不会进行切换了,会卡在最后一张图片上面。所以,我们接下来需要判断一下index是不是大于它的最大数量,当它大于轮播图的最大数量的时候,把它的值重新置于0,这样就可以实现循环切换了。
function bun(){
index++;
if(index>pic.length){
index=0;
}
接下来,就变的简单起来了,当index+1 的时候,我们就把对应的图片通过display显示出来就可以了,想对应的,我们要把上一张图片通过display:none隐藏起来。这样就可以了
pic[index].classList.add("show");
pic[index-1<0?4:index-1].classList.remove("show");
以上就基本实现了点击按钮进行切换的功能,同理,左边的按钮与右边的按钮是一样的,只不过改一下参数就可以了。
oLeft.onclick = function(){
index--;
if(index<pic.length){
index=4;
}
pic[index].classList.add("show");
pic[index+1>4?0:index-1].classList.remove("show");
}
让它自动循环切换图片,我们只需要加一个定时器就可以了。
let swiper = setInterval(bun,3000);
下面是完整的代码:
let oLeft = document.querySelector(".left"),
oRight = document.querySelector(".right"),
pic = document.querySelectorAll(".b-img ul li"),
txt = document.querySelectorAll(".b-tab ul li"),
index=0;
function bun(){
index++;
if(index>pic.Length){
index=0;
}
pic[index].classList.add("show");
pic[index-1<0?4:index-1].classList.remove("show");
}
oRight.onclick=bun;
oLeft.onclick = function(){
index--;
if(index<pic.Lenght){
index=4;
}
pic[index].classList.add("show");
pic[index+1>4?0:index-1].classList.remove("show");
}
let swiper = setInterval(bun,3000);
ok,大功告成!撒花(效果在下面)