如何用JS写一个渐变轮播图_js 渐变高度的轮播图-CSDN博客

本文链接：https://blog.csdn.net/minimorezhd/article/details/111716904

上期我们写了一种无缝滚动的轮播图，今天我们继续学习另一种轮播图，那就是渐变轮播图。

搭建html和css

其实html和css的内容挺简单的主要就是放上需要轮播的照片，然后把照片固定在合适的地方即可。渐变轮播图和顺序轮播图不同的地方在于，渐变轮播图是利用透明度来实现的。

书写js代码

轮播图的主要内容，也是最难的地方。
我直接把注释的需要理解的地方都写在代码里面了
所以大家直接看代码就好

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        *::selection {
            background: none;
        }
        
        .box {
            width: 1200px;
            height: 700px;
            margin: 100px auto;
            position: relative;
        }
        
        .box ul {
            width: 1200px;
            height: 700px;
        }
        
        ul li {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
        }
        
        img {
            width: 1200px;
            height: 700px;
        }
        
        .box ul li:first-child {
            opacity: 1;
        }
        
        .prev {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: pink;
            position: absolute;
            top: 40%;
            left: 10px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            display: none;
        }
        
        .next {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: pink;
            position: absolute;
            top: 40%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            right: 10px;
            display: none;
        }
        
        .next:hover,
        .prev:hover {
            background-color: skyblue;
        }
        
        ol {
            width: 350px;
            position: absolute;
            bottom: 5px;
            right: 0;
        }
        
        ol li {
            list-style: none;
            float: left;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-left: 10px;
            background-color: deepskyblue;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        
        .bg {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="box" class="box">
        <ul id="boxul">
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>
        <ol id="boxol">

        </ol>
        <div id="prev" class="prev">prev</div>
        <div id="next" class="next">next</div>
    </div>
</body>
<script>
    //封装一个简单的函数 少打一点代码
    function zhd(id) {
        return document.getElementById(id)
    }

    var box = zhd('box')
    var boxul = zhd('boxul')
    var boxol = zhd('boxol')
    var ulis = boxul.getElementsByTagName('li')
    //获取元素和 ul下面的每一个li

    for (var i = 0; i < ulis.length; i++) {
        var oli = document.createElement('li')
        oli.innerText = i + 1
        boxol.appendChild(oli)
        oli.setAttribute('num', i)
        //循环创建和ul下面数量相同的li 然后将其放入ol下面 给每个li添加一个下标 以便于后面跟着图片动
    }
    var olis = boxol.getElementsByTagName('li')
     //上面只是动态创建了ol下面的li 这里才是获取了这个li
    olis[0].className = 'bg'
    //默认第一个选中
    for (var i = 0; i < olis.length; i++) {
        olis[i].onclick = function() {
            index = this.getAttribute('num')
            //给下标注册事件 让其和图片的下标对应
            for (var j = 0; j < ulis.length; j++) {
                ulis[j].style.opacity = 0
                olis[j].className = ''
                //排他思想 先让所有的都不高亮
            }
            ulis[index].style.opacity = 1
            this.className = 'bg'
            //然后让选中的高亮
        }
    }

    var a = 0
    next.onclick = function() {
        a == ulis.length - 1 ? a = 0 : a++
        //当到最后一张图的时候 让其显示第一张图
            for (var i = 0; i < ulis.length; i++) {
                ulis[i].style.opacity = 0
                olis[i].className = ''
                   //排他思想 先让所有的都不高亮
            }
        ulis[a].style.opacity = 1
        olis[a].className = 'bg'
          //然后让选中的高亮
    }


    prev.onclick = function() {
        a == 0 ? a = ulis.length - 1 : a--
          //当到第一张图的时候 让其显示最后一张图
            for (var i = 0; i < ulis.length; i++) {
                ulis[i].style.opacity = 0
                olis[i].className = ''
                 //排他思想 先让所有的都不高亮
            }
        ulis[a].style.opacity = 1
        olis[a].className = 'bg'
         //然后让选中的高亮
    }

    box.onmouseenter = function() {
        next.style.display = 'block'
        prev.style.display = 'block'
        clearTimeout(timeId)
        //鼠标移入的时候 让两个图标显示 停止计时器
    }
    box.onmouseleave = function() {
        next.style.display = 'none'
        prev.style.display = 'none'
        timeId = setInterval(function() {
            next.click()
        }, 1000)
         //鼠标移出的时候 让两个图标隐藏 开启计时器
    }
    var timeId = setInterval(function() {
        next.click()
    }, 1000)
</script>

</html>