老师还是那个问题

慕瓜0126554 2021-02-03

源自：Babel 与 Webpack 6-2 项目作业

收起

2回答

好帮手慕张 2021-02-03 19:31:07

同学你好，同学的代码复杂，不好实现。老师这里提供一种简单的方法，先定义一个index为0变量，用来记录图片下标的变化，老师提供代码如下，供同学参考

祝学习愉快！

收起回答

好帮手慕张 2021-02-03 16:03:09

同学你好，问题解答如下：

根据同学提供的截图来看：当i=0的时候，0-1=-1，没有这个节点，所以为undefined找不到className类名

老师猜测同学可能要实现的效果为：当轮播图自动轮播，轮播到哪一张的时候小圆点也对应加上className变成高亮，目前截图来看，同学的代码思路可能实现不了这个效果。这里老师说一下实现的思路：可以按照老师课上讲解的思路，先把所有小圆点的className都去掉，然后根据图片的下标，轮播到哪张图片就给对应的小圆点加上类名。

如果同学还要其它问题，可以再次提问，老师会帮助同学解答问题。提问时建议把完整的代码粘贴上来（不要截图），方便帮助同学测试代码查找问题。

祝学习愉快！

收起回答

提问者慕瓜0126554 #1

// 获取控件
const sliderItem=document.querySelectorAll('#d1>.slider-item');
const xyd=document.querySelectorAll('#xyd>span');
console.log(xyd);
// 定时器
setInterval(() => {
    // 遍历控件数组中的元素
    for(let i=0;i<sliderItem.length;i++){
        if(sliderItem[i].className='slider-item'&&xyd[i].className==''){
            sliderItem[i].className+=' slider-item-active';
            xyd[i].className='active';
        }
        sliderItem[i].className='slider-item';
        xyd[i].className='';
    }
}, 1000);


        <div class="banner demo">
            <h3>自动或点击小圆点切换图片</h3>
            <div class="slider-layout">
                <div class="banner-slider slider">
                    <div class="slider-content" id="d1">
                        <div class="slider-item slider-item-active"><img src="img/banner01.png" alt=""></div>
                        <div class="slider-item"><img src="img/banner02.png" alt=""></div>
                        <div class="slider-item"><img src="img/banner03.png" alt=""></div>
                    </div>
                    <div class="dots pagination" id="xyd">
                        <span class="active"></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

2021-02-03 16:12:44