js原生 JavaScript轮播图【渐变淡入淡出】效果实现(附代码)

目录

前言

轮播图的组成以及实现思想

左右按钮的隐藏与显示

核心思想 

代码实现 

动态生成底部小圆圈

核心思想

代码实现

         右左按钮实现

核心思想

代码实现

实现自动播放

核心思想

代码实现

整体代码(复制可用)

总结


前言

     常见的轮播图有两种:移动距离轮播图渐变切换轮播图,但是轮播图的代码都是差不太多的。这里就是给大家讲解的是渐变轮播图的切换,下面有渐变轮播图的效果展示图。

轮播图的组成以及实现思想

轮播图的组成图

轮播图的组成图

左右按钮的隐藏与显示

核心思想 

      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上清除定时器,移开启动定时器。

代码实现

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);

整体代码(复制可用)

<!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>

总结

       虽然现在很多时候轮播图可以直接板块套用,但是我们还是需要扎实的功底。毕竟学无止境!这里讲解的是大概的一个思路以及实现,轮播的大概思想 就是这个样子的。只是根据效果的不同需要稍微做一些修改啦~

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>