原生js实现渐变轮播图(全)

最新推荐文章于 2023-04-01 17:10:47 发布

开源首席特技师

最新推荐文章于 2023-04-01 17:10:47 发布

阅读量1.9k

点赞数 1

分类专栏： js 文章标签： js 前端轮播图

本文链接：https://blog.csdn.net/qq_28919991/article/details/82930138

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

轮播图的原理就是将多个绝对定位并透明度为零的图片通过js代码变更透明度样式
依次显示出来，非常简单
小编接下来要讲的轮播图功能十分齐全，拭目以待吧
ps：记得更改图片路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图(原生js)</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            background-color: #cccccc;
        }
        *::selection{
            background: none;
        }
        ul,li{
             list-style: none;
         }
        .plat{
            position: relative;
            width: 602px;
            height: 352px;
            margin: 40px auto;
            border: 3px solid #b25f27;
        }
        img{
            width: 600px;
            height: 350px;
            top: 1px;
            left: 1px;
            position: absolute;
        }
        li{
            opacity: 0;
            transition: 1s;
        }
        li:first-child {
            opacity: 1;
        }
        .btn{
            width: 70px;
            height: 30px;
            position: absolute;
            left: 1px;
            top: 150px;
            text-align: center;
            color: #FFFFFF;
            background-color: rgb(0,0,0,0.7);
            cursor: pointer;
        }
        .btn:hover{
             background-color: rgb(0,0,0,0.9);
         }
        .btn:active{
            background-color: rgb(0,0,0,0.5);
        }
        .btn1{
            width: 70px;
            height: 30px;
            position: absolute;
            top: 150px;
            right: 1px;
            text-align: center;
            color: #FFFFFF;
            background-color: rgb(0,0,0,0.7);
            cursor: pointer;
        }
        .btn1:hover{
            background-color: rgb(0,0,0,0.9);
        }
        .btn1:active{
            background-color: rgb(0,0,0,0.5);
        }
        .num0{
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: rgb(255,255,255,0.8);
            border-radius: 50%;
            left: 270px;
            top: 330px;
        }
        .num1{
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: rgb(255,255,255,0.8);
            border-radius: 50%;
            left: 290px;
            top: 330px;
        }
        .num2{
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: rgb(255,255,255,0.8);
            border-radius: 50%;
            left: 310px;
            top: 330px;
        }
        .num3{
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: rgb(255,255,255,0.8);
            border-radius: 50%;
            left: 330px;
            top: 330px;
        }
        .num:hover{
            background-color: rgb(0,0,0,0.7);
        }
        .follow{
            background-color: rgb(0,0,0,0.7);
        }
    </style>
</head>
<body>
<div class="plat">
    <ul>
        <li><img src="img/01.jpg"></li>
        <li><img src="img/02.jpg"></li>
        <li><img src="img/03.jpg"></li>
        <li><img src="img/04.jpg"></li>
    </ul>

    <div class="dot" id="dot">
        <div class="num0 num" id="num0"></div>
        <div class="num1 num" id="num1"></div>
        <div class="num2 num" id="num2"></div>
        <div class="num3 num" id="num3"></div>
    </div>

    <div class="btn"  id="right">right</div>
    <div class="btn1" id="left">left</div>
    <script>
        var li = document.getElementsByTagName('li');
        var right = document.getElementById('right');
        var left = document.getElementById('left');
        var num = document.getElementsByClassName('num');
        var liIndex = 0;  //图片的显示序号
        var timer;  
        addEvent();
        function addEvent() {
            num[0].classList.add('follow');
            left.addEventListener('click',leftClick);
            right.addEventListener('click',rightClick);
            for (var i=0;i<li.length;i++) {   //给每一个小圆点加一个事件
                num[i].addEventListener('mouseenter',dot);
            }
        }
        window.onload = function () {
             timer =  setInterval(function () {
                liIndex++;
                if (liIndex ==li.length) {
                    liIndex = 0;
                }
                for (var i=0;i<li.length;i++) {
                    li[i].style.opacity = 0;
                    num[i].classList.remove('follow');
                }
                li[liIndex].style.opacity = 1;
                num[liIndex].classList.add('follow');
            },2000)
        }
        function dot(e) {  
            clearInterval(timer);
            var event = e.target;  //原事件
            var ev = event.getAttribute('id').split('num');  //取到小圆点除去了num的id
            liIndex = ev[1];
            for (var i=0;i<li.length;i++) {
                li[i].style.opacity = 0;
                num[i].classList.remove('follow');  
            }
            li[liIndex].style.opacity = 1;
            num[liIndex].classList.add('follow');
        }
        function leftClick() {
            clearInterval(timer);
            liIndex++;
            if (liIndex ==li.length) {
                liIndex = 0;
            }
            for (var i=0;i<li.length;i++) {
                li[i].style.opacity = 0;
                num[i].classList.remove('follow');
            }
            li[liIndex].style.opacity = 1;
            num[liIndex].classList.add('follow');
        }
        function rightClick() {
            clearInterval(timer);
            liIndex--;
            if (liIndex == -li.length) {
                liIndex = 0;
            }
            switch (liIndex)
            {
                case -1:
                    liIndex = 3;
                    break;
                case -2:
                    liIndex = 2;
                    break;
                case -3:
                    liIndex = 1;
                    break;
                case -4:
                    liIndex = 0;
                    break;
            }
            for (var i=0;i<li.length;i++) {  
                li[i].style.opacity = 0;
                num[i].classList.remove('follow');
            }
            li[liIndex].style.opacity = 1;
            num[liIndex].classList.add('follow');
        }
    </script>
</div>
</body>
</html>

图片资源
百度网盘