css+js实现自动轮播图效果（鼠标悬停图片静止，可以点击小圆点对图片进行切换）

最近在写web老师布置的网站大作业，轮播图这一块很是头疼，查了很多的资料，最终总结了如下的方法希望对你们有帮助。

方法一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3881267_wfv3iyzbijg.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .lunbo {
        position: relative;
        height: 700px;
        width: 100%;
        /* border: 1px solid; */
        /* margin: 100px auto; */
    }

    #img {
        height: 100%;
        width: 100%;
        background-size: 100% 100%;
        /* transition: 0.2s; */
        transition: 1s linear;
    }

    .lp{
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translate(-50%, -50%);
    }

    .lunbo i {
        height: 15px;
        width: 15px;
        background-color: gray;
        border-radius: 50%;
        /* background: url(../educaimage/dian2.png) no-repeat left center; */
        display: inline-block;
        margin-right: 10px;
    }

    .lunbo i:nth-child(1) {
        background-color: white;
    }

    .lunbo i:nth-child(4) {
        margin-right: 0;
    }
</style>

<body>
    <div class="lunbo">
        <img src="../educaimage/lunbo01.jpg" alt="" id="img">
        <p class="lp"></p>
    </div>
    <script>
        let pEle = document.getElementsByClassName("lp")[0];
        //获取事件代理的父元素section
        let secEle = document.getElementsByClassName("lunbo")[0];

        let imgArr = [
            "../educaimage/lunbo01.jpg",
            "../educaimage/lunbo02.jpg",
            "../educaimage/lunbo03.jpg",
            "../educaimage/lunbo04.jpg",
        ]
        //获取时间函数的起始下标
        let i = 0;
        //图片有多少张，就传几个参进去，并且接收这个返回的数组
        let cirArr = creatCircle(imgArr.length);
        //遍历cirArr数组，将圆点添加进它的父节点p节点中
        cirArr.forEach(node => pEle.appendChild(node));

        //获取所有的圆点节点
        let iEle = document.getElementsByTagName("i");
        //给每一个圆点添加上自定义属性，并赋上下标
        for (let k = 0; k < iEle.length; k++) {
            iEle[k].dataset.index = k;
        }

        let timer;
        //轮播：时间函数，1秒自动换一张
        function playTime() {
            timer = setInterval(() => {
                //循环展示图片
                i++;
                //如果已经跳到最后一张，就再次回到第一张
                if (i > imgArr.length - 1) {
                    i = 0;
                }
                //给圆点添加样式，开始运行该函数
                addStyleI(i);
                //图片标签地址（src属性）
                img.src = imgArr[i];
            }, 3000);
        }
        playTime();

        // 鼠标移入，图片暂停
        secEle.addEventListener("mouseenter", function () {
            clearInterval(timer);
            timer = null;
        });
        // 鼠标移出，图片恢复滚动
        secEle.addEventListener("mouseleave", playTime);
        secEle.addEventListener("click", function (e) {
            let event = e || window.event;
            img.src = imgArr[i];
            addStyleI(i);
            //点击小圆点可以切换到对应的图片上
            if (event.target.nodeName == "I") {
                //获得点击的圆点的自定义索引值
                cirI = event.target.dataset.index;
                //替换图片
                img.src = imgArr[cirI];
                //更改圆点样式
                addStyleI(cirI);
                //每当点击小圆点，i的值就会被赋成圆点下标的值
                i = cirI;
            }
        });

        //暂停图片滚动
        function picScroll() {
            clearInterval(timer);
        }

        //生成点
        function creatCircle(num) {
            //创建一个空数组来接收这个圆点
            let iArr = [];
            for (let j = 0; j < num; j++) {
                //新增圆点节点
                let circleNode = document.createElement("i");
                //再把新增的圆点节点放进圆点数组中
                iArr.push(circleNode);
            }
            //完成后，返回该数组
            return iArr;
        }

        //给圆点添加样式
        function addStyleI(index) {
            //圆点的默认颜色是灰色
            [...iEle].forEach(node => node.style.backgroundColor = "gray");
            //当跳到该图片时，圆点变成白色
            iEle[index].style.backgroundColor = "white";
        }
    </script>
</body>

</html>

可以直接复制此代码（不要忘记改变图片的路径）

方法二：

主体：


<ul class="lunbo01">
                    <li class="lb"><img src="../educaimage/view01.jpg" alt="#" /></li>
                    <li class="lb"><img src="../educaimage/view02.jpg" alt="#" /></li>
                    <li class="lb"><img src="../educaimage/view03.jpg" alt="#" /></li>
 </ul>

css:

.lunbo01{
    width: 490px;
    height: 370px;
    list-style-type: none;
    padding: 0px;
    float: left;
    position: relative;
}
.lunbo01 li,img{
    width: 100%;
    height: 100%;
}
.lunbo01 li{
    position: absolute;
    opacity: 0;
    transition: 1s;
}

// view轮播图
window.onload = function () {
    var arr = document.getElementsByClassName("lb");
    var i = 0;
    arr[0].style.opacity = 1;
    setInterval(function () {
        if (i > 2) {
            i = 0;
            for (var j = 0; j < arr.length; j++) {
                arr[j].style.opacity = 0;
            }
        }
        arr[i].style.opacity = 1;
        i++;
    }, 3000);
}

此方法只能实现图片的自动播放

css+js实现自动轮播图效果（鼠标悬停图片静止，可以点击小圆点对图片进行切换）

猜你喜欢