banner切换失败

老师,为什么我这个代码在1秒后直接跑完一遍,即0 1 2 3 4同时打出来,体现到页面上就感觉没动,实际上已经跑完了一圈!换了ie10和火狐以及360都是这样!很蒙圈.....求解答

qq_改变_mwM078 2021-08-16

源自：第3天：倾慕客栈轮播图和Tab特效开发 2-15 图片自动轮播功能开发（2）

收起

2回答

好帮手慕慕子 2021-08-18 10:44:11

同学你好，因为将changeImage函数和定时器代码放在了for循环中，导致代码效果不对。

建议修改：将这段代码放在for循环外面，然后针对切换到最后一张图片的情况进行处理即可，如下：

祝学习愉快~

收起回答

好帮手慕慕子 2021-08-17 10:52:59

同学你好，只有部分代码无法准确的定位问题所在，建议将你写的html、css和js的完整代码全部粘贴过来（可以分多次粘贴），老师帮你测试下，

祝学习愉快~

收起回答

提问者 qq_改变_mwM078 #1

window.onload=function (){
//获取banner图片和对应的小圆点
    var imgs = document.querySelectorAll('.img')
var span = document.querySelector('.dots').querySelectorAll('span');

    for (var i=0;i < span.length;i++){
        imgs[i].setAttribute("data-index",i);
        span[i].setAttribute("data-index",i);
        //获取当前显示图片的下标
        var currentImg = document.querySelector('.current');
        var currentIndex = currentImg.getAttribute('data-index');


        function changeImages(){
console.log(currentIndex);
            if(currentIndex<imgs.length-1){
                span[currentIndex].classList.remove('square');
                imgs[currentIndex].classList.remove('current');

                span[++currentIndex].classList.add('square');
                imgs[currentIndex].classList.add('current');
            }
        }
var timer = setInterval(changeImages,1000);

        span[i].addEventListener('click',function (){
//点击当前小圆的下标
            var index = this.getAttribute('data-index');
            //当前显示图标的下标不等于点击图片下标时,切换图片
            if (index!=currentIndex){
// square
                span[currentIndex].classList.remove('square');
                imgs[currentIndex].classList.remove('current');

                span[index].classList.add('square');
                imgs[index].classList.add('current');
                currentIndex = index;
            }
        });
    }
}

老师你好,这个就是我的js代码,下面是html

<div class="bannerBox">
        <!--图片展示-->
        <ul>
            <li><img src="image/banner/banner01.png" alt="" class="img current"></li>
            <li><img src="image/banner/banner02.png" alt="" class="img"></li>
            <li><img src="image/banner/banner03.png" alt="" class="img"></li>
            <li><img src="image/banner/banner04.png" alt="" class="img"></li>
            <li><img src="image/banner/banner05.png" alt="" class="img"></li>
        </ul>
        <!--上下页展示-->
        <div class="lf"></div>
        <div class="lr"></div>
        <!--图片定位展示-->
        <div class="dots">
            <span class="square"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
</div>

2021-08-17 19:12:59

提问者 qq_改变_mwM078 #2

这是css代码

/*bannerBox*/
.bannerBox{
width: 100%;
    height: 640px;
    position: relative;
    overflow: hidden;
}
.bannerBox li .img{
width: 100%;
    height: 640px;
    display: none;
}
.bannerBox  li .current{
display:block;
}
.bannerBox .dots{
position: absolute;
    left: 50%;
    bottom: 60px;
    width: 100px;
    margin-left: -50px;
}
.bannerBox .dots span{
display: inline-block;
    background: #ffffff;
    height: 11px;
    width: 11px;
    border-radius: 15px;
    box-sizing: border-box;
    cursor: pointer;
}
.bannerBox .dots span:not(:last-child){
margin-right: 5px;
}
.bannerBox .dots .square{
background: #00848A;
}