JS——制作轮播图

这个轮播图是通过设置元素的透明度来实现切换的，设置所有元素的透明度为0，其中，使其中一个li的类为active，在css中设置active类的透明度为1。

同时在js部分，设置点击事件，通过index的加减来设置active类的变化，使其达到轮播出现的效，并且设置了时延定时器，使其达到2s内自动切换的效果

最后设定了鼠标移入移出监听事件，当鼠标移入时停止自动轮播，当鼠标移出时继续

以下是实现代码

HTML代码

<ul id="carousel">
        <li class="active">下雨天</li>
        <li>暴风雨</li>
        <li>下大雪</li>
        <li>大太阳</li>
    </ul>
</div>
<button id="preview">上一张</button>
<button id="next">下一张</button>

CSS代码

 

#carousel {
    width: 200px;
    height: 200px;
    position: relative;
}

#carousel li {
    width: 200px;
    height: 200px;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 5px #000;
    font-size: 35px;
    color: pink;
    /* 去除li的样式 */
    list-style-type: none;
    /* 设置透明度为0 */
    opacity: 0;
    /* 持续一秒的透明度切换 */
    transition: opacity 1s;
}

/* 给四个元素设置不同的背景颜色 */
#carousel li:nth-child(1) {
    background-color: aqua;
}

#carousel li:nth-child(2) {
    background-color: rgb(0, 60, 255);
}

#carousel li:nth-child(3) {
    background-color: rgb(255, 0, 25);
}

#carousel li:nth-child(4) {
    background-color: rgb(70, 113, 47);
}

/* 第一个默认显示的元素 */
#carousel li.active {
    opacity: 1;
}

Javascript代码

        var carousel = document.querySelector('#carousel')
        //获取要轮播的所有内容
        var items = carousel.children
        console.log(items)
        //获取按钮
        var prvbtn = document.querySelector('#preview')
        var nextbtn = document.querySelector('#next')
        var index = 0
        //点击下一张
        nextbtn.addEventListener('click', function () {
            items[index].className = ''
            if (index === items.length - 1) {
                index = -1 //当下标到最后一个时，说明这时需要更改下标的值为0，但是后面有index++操作，故为-1
            }
            index++
            items[index].className = 'active'//切换类名为active，实现内容显示，达到切换到效果

        })

        //点击上一张
        prvbtn.addEventListener('click', function () {
            items[index].className = ''
            index--
            if (index === -1) {
                index = items.length - 1 //当下标到第一个时，说明这时需要更改下标的值为0，但是后面有index--操作，故为index.length
            }

            items[index].className = 'active'//切换类名为active，实现内容显示，达到切换到效果
        })
        //实现图片每隔两秒自动切换
        var timer = setInterval(function () {
            items[index].className = ''
            if (index === items.length - 1) {
                index = -1 //当下标到最后一个时，说明这时需要更改下标的值为0，但是后面有index++操作，故为-1
            }
            index++
            items[index].className = 'active'//切换类名为active，实现内容显示，达到切换到效果

        }, 2000)
        //鼠标移入停止播放
        carousel.addEventListener('mouseover', function () {
            console.log('clean')
            clearInterval(timer)
            // 清除计时器后手动执行一次轮播操作，以确保轮播图立即停止
            items[index].className = '';
        })
        //鼠标移出继续播放
        carousel.addEventListener('mouseout', function () {
            console.log('continue')
            timer = setInterval(function () {
                items[index].className = ''
                if (index === items.length - 1) {
                    index = -1 //当下标到最后一个时，说明这时需要更改下标的值为0，但是后面有index++操作，故为-1
                }
                index++
                items[index].className = 'active'//切换类名为active，实现内容显示，达到切换到效果

            }, 2000)
        })