jsjs原生 JavaScript轮播图渐变淡入淡出

发布时间：2024年01月20日

??下面是整体代码复制即可使用，

<!DOCTYPE html>
<html lang="zn">
 
<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>
    <script>
        window.addEventListener('load', function () {
            var box = document.querySelector('.box');
            var right = box.querySelector('.right');
            var left = box.querySelector('.left');
            var ul = box.querySelector('ul');
            var ul_lis = ul.querySelectorAll('li');
            var ol = box.querySelector('ol');
            var num = 0;
            var circle = 0;
            var flag = true;
 
 
            // 1.鼠标经过轮播图模块, 左右按钮显示, 离开隐藏左右按钮。
            box.addEventListener('mouseenter', function () {
                right.style.display = 'block';
                left.style.display = 'block';
                clearInterval(timer);
                timer = null;
            });
            box.addEventListener('mouseleave', function () {
                right.style.display = 'none';
                left.style.display = 'none';
                timer = setInterval(function () {
                    right.click();
                }, 2000);
            });
            var timer = setInterval(function () {
                right.click();
            }, 2000);
 
            //2.动态生成小圆圈 
            for (var i = 0; i < ul_lis.length; i++) {
 
                var li = document.createElement('li');
                li.className = 'current';
                li.setAttribute('index', i);
                ol.appendChild(li);
 
                //添加注册事件  排他思想
                li.addEventListener('click', function () {
 
                    for (var i = 0; i < ol.children.length; i++) {
                        ul_lis[i].style.opacity = '0';//排他思想：全部图片设置为透明
                        ol.children[i].className = 'current';
 
                    }
                    this.className = 'current white';
 
                    var index = this.getAttribute('index');
                    ul_lis[index].style.opacity = '1';//留下需要显示的图片
 
                    num = index;
                    circle = index;
                });
 
            }
            ol.children[0].className = 'current white';
 
 
            //TRUE 深拷贝 复制内容且复制标签
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            // 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。
 
            right.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    if (num == ul.children.length - 1) {
                        num = 0;
                    }
                    num++;
                    if (num == 4) { num = 0; }
                    for (var i = 0; i < ol.children.length; i++) {
                        ul_lis[i].style.opacity = '0';
                    }
                    ul_lis[num].style.opacity = '1';
                    flag = true;
 
                    //变量控制小圆圈的变化
                    circle++;
                    if (circle == ol.children.length) {
                        circle = 0;
 
                    }
 
                    circlechange();
                }
 
            });
 
            function circlechange() {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = 'current';
                }
                ol.children[circle].className = 'current white';
            };
 
            left.addEventListener('click', function () {
 
                if (flag) {
                    flag = false;
                    //实现无缝滚动
                    if (num == 0) {
                        num = ul.children.length - 1;
 
                    }
                    num--;
                    if (num == -1) { num = 4; }
                    for (var i = 0; i < ol.children.length; i++) {
                        ul_lis[i].style.opacity = '0';
                    }
                    ul_lis[num].style.opacity = '1';
 
                    flag = true;//一次只执行完毕才可以点击下一次
                    //变量控制小圆圈的变化
                    circle--;
                    if (circle < 0) {
                        circle = ol.children.length - 1;
                    }
 
                    circlechange();
                }
 
            });
 
        });
    </script>
 
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
 
        .box {
            position: relative;
            width: 810px;
            height: 540px;
            left: 50%;
            transform: translateX(-50%);
 
        }
 
        img {
            width: 810px;
            height: 540px;
        }
 
        ul li {
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;
            transition: 1s;
        }
 
        ul li:first-child {
            opacity: 1;
        }
 
        ul {
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
 
        span {
            width: 20px;
            height: 40px;
            font-size: 25px;
            line-height: 40px;
            display: block;
            position: absolute;
            color: black;
            background-color: #ccc;
            opacity: .5;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            display: none;
        }
 
        .right {
            right: 0px;
        }
 
        .left {
            left: 0px;
        }
 
        ol {
            position: absolute;
            left: 50%;
            z-index: 999;
            transform: translateX(-50%);
            bottom: 5px;
        }
 
        .current {
            float: left;
            display: block;
            width: 25px;
            height: 5px;
            background-color: rgb(41, 39, 39);
            margin-right: 10px;
            opacity: 0.5;
        }
 
        .white {
            background-color: #fff;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <ul>
            <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>
 
        </ul>
        <span class="right"> &gt; </span>
        <span class="left"> &lt; </span>
 
        <ol>
        </ol>
 
 
 
    </div>
 
</body>
 
</html>

常见的轮播图有两种：移动距离轮播图，渐变切换轮播图但是轮播图的代码都是差不太多的。这里就是给大家讲解的是渐变轮播图的切换，

这个是对轮播图的上下左右进行隐藏

?box（装整个轮播图的盒子）获得焦点的时候按钮style.display属性改为block失去焦点none。

 //获取焦点显示
box.addEventListener('mouseenter', function () {
        right.style.display = 'block';
        left.style.display = 'block';
    });
 
 //失去焦点隐藏
box.addEventListener('mouseleave', function () {
        right.style.display = 'none';
        left.style.display = 'none';
    });

添加圆点

?图片的数量动态生成小圆圈的数量，实现灵活控制。根据ul里的li的长度得到小圆圈的数量。

 for (var i = 0; i < ul_lis.length; i++) {
 
        var li = document.createElement('li');
        li.className = 'current';//current类是样式
        ol.appendChild(li);
 
        //添加注册事件  排他思想
        li.addEventListener('click', function () {
 
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = 'current';
 
            }
            this.className = 'current white';
 
            var index = this.getAttribute('index');
           
 
            num = index;
            circle = index;
        });
 
    }
    ol.children[0].className = 'current white';//默认第一个为白色底

给左右添加

给ol添加一个index属性，以便于获取当前属于第几张图片（ol 和 ul 里面的 li 数量是一致的）。给左按钮添加一个点击事件，根据num（num由index赋值过来）跳转下一张图；设置flag（节流阀）保证是一次跳转完成之后才可以实现下一次的跳转。

 //TRUE 深拷贝 复制内容且复制标签
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。
 
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                num = 0;
            }
            num++;
            if (num == 4) { num = 0; }
            for (var i = 0; i < ol.children.length; i++) {
                ul_lis[i].style.opacity = '0';
            }
            ul_lis[num].style.opacity = '1';
            flag = true;
 
            //变量控制小圆圈的变化
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
 
            }
 
            circlechange();
        }
 
    });
 
    left.addEventListener('click', function () {
 
        if (flag) {
            flag = false;
            //实现无缝滚动
            if (num == 0) {
                num = ul.children.length - 1;
 
            }
            num--;
            if (num == -1) { num = 4; }
            for (var i = 0; i < ol.children.length; i++) {
                ul_lis[i].style.opacity = '0';
            }
            ul_lis[num].style.opacity = '1';
            
            flag = true;//一次只执行完毕才可以点击下一次
            //变量控制小圆圈的变化
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
 
            circlechange();
        }
 
    });
 
});
 
 
function circlechange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = 'current';
        }
        ol.children[circle].className = 'current white';
    };

最后一步就是实现自动轮播啦?

box.addEventListener('mouseenter', function () {
        clearInterval(timer);
        timer = null;
    });
box.addEventListener('mouseleave', function () {
        timer = setInterval(function () {
            right.click();
        }, 2000);
    });
var timer = setInterval(function () {
        right.click();
    }, 2000);

文章来源:https://blog.csdn.net/weixin_62980497/article/details/135710865
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

jsjs原生 JavaScript轮播图 渐变淡入淡出

jsjs原生 JavaScript轮播图渐变淡入淡出