js实现淡入淡出轮播图

淡入淡出轮播图

实现功能：

1、鼠标离开自动轮播，鼠标滑入停止自动轮播

2、点击圆圈或箭头，更换轮播图片

实现思路：

1、搭建框架：通过html、css搭建框架渲染样式，通过把第一张设置透明度为1，其他图片透明度为0的方法实现淡入淡出，透明度可以加一个过渡让转换更流畅；

2、展示图片：设置显示轮播图片默认第一张；设置切换图片事件，先移除当前图片再添加一个具有active效果的轮播图片；

3、点击切换：设置圆圈以及左右箭头点击切换下一张事件，注意：切换到最左侧需要把索引改为最后一张，切换到最右侧则把索引改为第一张；

4、自动轮播：设置定时器，鼠标滑入停止自动轮播、离开继续自动轮播事件。

代码如下：

js：

　　 let box = document.querySelector('.box')

        let imgs = document.querySelectorAll('.img-box li')

        let circles = document.querySelectorAll('.circle-box li')

        let leftBtn = document.querySelector('.left-btn')

        let rightBtn = document.querySelector('.right-btn')

        // 显示图片的索引

        let imgIndex = 0

        // 切换展示到指定图片

        function play(index){

            // 遍历每一项，然后移除class类名为active的元素节点

            imgs.forEach(item=>{

                item.classList.remove('active')

            })

            // 添加带有active效果的元素节点

            imgs[index].classList.add('active')

            // 点亮圆圈（同上）

            circles.forEach(item=>{

                item.classList.remove('active')

            })

            circles[index].classList.add('active')

        }

        // 点击左侧切换上一张

        leftBtn.onclick = function(){

            // 根据索引切换(索引是0时变为最后一张，其他递减)

            imgIndex = imgIndex == 0 ? imgs.length-1 : --imgIndex

            // 执行切换

            play(imgIndex)

        }

        // 点击右侧切换下一张

        rightBtn.onclick = function(){

            // 索引（判断最后一张则下一个展示第一张，否则递增）

            imgIndex = imgIndex == imgs.length-1 ? 0 : ++imgIndex

            // 执行切换

            play(imgIndex)

        }

        // 点击圆圈切换相应图片（圆圈图片都是数组所以要遍历）

        circles.forEach((item,index)=>{

            item.onclick = function(){

                // 更改索引

                imgIndex = index

                // 执行切换

                play(imgIndex)

            }

        })

        // 自动轮播

        // 鼠标离开盒子轮播继续

        // 设置定时器

        let timer = null

        // 整个文档加载后触发鼠标离开自动轮播继续事件

        window.oncload = box.onmouseout = function(){

            timer = setInterval(function(){

                // 调用右键按钮事件

                rightBtn.click()

            },2000)

        }

        // 鼠标悬停在盒子上轮播停止

        box.onmouseover = function(){

            // 清除定时器

            clearInterval(timer)

        }

 

 

html：

<div class="box">

        <!-- 图片 -->

        <ul class="img-box">

            <li class="active">

                <img src="./image/a.jpg" alt="">

            </li>

            <li>

                <img src="./image/b.jpg" alt="">

            </li>

            <li>

                <img src="./image/c.jpg" alt="">

            </li>

            <li>

                <img src="./image/d.jpg" alt="">

            </li>

            <li>

                <img src="./image/e.jpg" alt="">

            </li>

        </ul>

        <!-- 圆圈 -->

        <ul class="circle-box">

            <li class="active"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <!-- 左右按钮 -->

        <span class="left-btn"><</span>

        <span class="right-btn">></span>

</div>

 

 

css：

　　*{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style: none;

        }

        .box{

            position: relative;

            width: 800px;

            height: 300px;

            margin: 100px auto;

        }

        .img-box li{

            position: absolute;

            top: 0;

            left: 0;

            width: 800px;

            height: 300px;

            /* 设透明度为0 */

            opacity: 0;

            transition: opacity 2s;

        }

        /* 第一张显示 */

        .img-box li.active{

            opacity: 1;

        }

        .img-box img{

            width: 100%;

            height: 100%;

        }

        /* 圆圈 */

        .circle-box{

            position: absolute;

            left: 50%;

            bottom: 10px;

            transform: translateX(-50%);

        }

        .circle-box li{

            float: left;

            width: 8px;

            height: 8px;

            margin-right: 8px;

            border-radius: 50%;

            background: rgb(195, 191, 191);

            border: 2px solid black;

            cursor: pointer;

        }

        .circle-box li.active, .circle-box li:hover{

            background: #fff;

        }

        /* 左右按钮 */

        .box span{

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            font-size: 35px;

            color: rgba(255,255,255,.3);

            cursor: pointer;

        }

        .box span:hover{

            color: rgba(255,255,255,.8);

            background: rgba(0,0,0,.5);

        }

        .left-btn{

            left: 0;

            padding: 10px 7px 10px 3px;

        }

        .right-btn{

            right: 0;

            padding: 10px 3px 10px 7px;

        }

 

实现效果：