轮播图完整实现

实现轮播图需求1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮2.点击右侧按钮一次,图片往左播放一张.左侧按钮同理3.图片播放时,下面小圆圈模块跟随一起变化4.点击小圆圈,可以播放相应图片5.鼠标不经过轮播图,轮播图也会自动播放图片6.鼠标经过,轮播图模块自动停止播放废话不多说直接上代码htnl css<!DOCTYPE html><html><head>

赤子之心

6693人浏览 · 2022-01-18 01:19:00

赤子之心 · 2022-01-18 01:19:00 发布

实现轮播图需求

1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

2.点击右侧按钮一次,图片往左播放一张.左侧按钮同理

3.图片播放时,下面小圆圈模块跟随一起变化

4.点击小圆圈,可以播放相应图片

5.鼠标不经过轮播图,轮播图也会自动播放图片

6.鼠标经过,轮播图模块自动停止播放

废话不多说直接上代码

htnl css

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .banner {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        
        .banner ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 900%;
            padding: 0;
            display: block;
        }
        
        .banner ul li {
            list-style: none;
            float: left;
        }
        
        .left,
        .right {
            display: none;
            position: absolute;
            top: 50%;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 18px;
            z-index: 2;
        }
        
        .right {
            right: 0;
        }
        
        ol {
            position: absolute;
            bottom: 30px;
            left: 315px;
        }
        
        ol li {
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #666;
            float: left;
            margin: 7px 8px;
        }
        
        .current {
            background-color: #fff;
        }
    </style>
    <script src='js/animate.js'></script>
    <script src="js/banner.js"></script>
</head>

<body>

    <div class="banner">
        <div class="left">
            < </div>
                <div class="right">></div>
                <ul>
                    <li>
                        <a>
                            <img src="images/1.jpg">
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="images/2.jpg">
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="images/3.jpg">
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="images/4.jpg">
                        </a>
                    </li>
                </ul>
                <ol>

                </ol>
        </div>
        <script>
            // 功能需求
            // 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
            // 2.点击右侧按钮一次,图片往左播放一张.左侧按钮同理
            // 3.图片播放时,下面小圆圈模块跟随一起变化
            // 4.点击小圆圈,可以播放相应图片
            // 5.鼠标不经过轮播图,轮播图也会自动播放图片
            // 6.鼠标经过,轮播图模块自动停止播放
        </script>
</body>

</html>

动画js文件

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

轮播图js文件

window.addEventListener('load', function() {
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var banner = document.querySelector('.banner');
    var ul = document.querySelector('ul');
    var ol = document.querySelector('ol');
    var bannerwidth = banner.offsetWidth;
    var num = 0;
    var ck = 0;
    // 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
    banner.addEventListener('mouseenter', function() {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    banner.addEventListener('mouseleave', function() {
            left.style.display = 'none';
            right.style.display = 'none';
            timer = setInterval(function() {
                //手动调用
                right.click();
            }, 2000)
        })
        //动态生成小圆点
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        //记录当前小圆圈的索引号  通过自定义属性
        li.setAttribute('index', i);

        ol.appendChild(li);
        // 点击小圆圈变换颜色  排他思想
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 4.点击小圆圈,可以播放相应图片 移动的是ul
            //ul的移动的距离算法  小圆圈的索引号乘以图片的宽度
            var index = this.getAttribute('index');
            num = index;
            ck = index;
            console.log(bannerwidth);
            animate(ul, (-index * bannerwidth));
        })
    }
    //克隆第一张图片
    var clone = ul.children[0].cloneNode(true);
    ul.appendChild(clone);
    ol.children[0].className = 'current';
    // 2.点击右侧按钮一次,图片往左播放一张.左侧按钮同理
    //flag 节流阀
    var flag = true;

    right.addEventListener('click', function() {
        if (flag) {
            flag = false; //关闭节流阀
            //如果走到了最后与一张图片  快速复原  left=0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * bannerwidth, function() {
                flag = true; //打开节流阀
            });
            // 3.图片播放时,下面小圆圈模块跟随一起变化
            ck++;
            if (ck == ol.children.length) {
                ck = 0;
            }
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';

            }
            ol.children[ck].className = 'current';
        }
    })
    left.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * bannerwidth + 'px';

                }
                num--;
                animate(ul, -num * bannerwidth, function() {
                    flag = true;
                });
                ck--;
                if (ck < 0) {
                    ck = ol.children.length - 1;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';

                }
                ol.children[ck].className = 'current';
            }

        })
        // 5.鼠标不经过轮播图,轮播图也会自动播放图片
        // 6.鼠标经过,轮播图模块自动停止播放
    var timer = this.setInterval(function() {
        //手动调用
        right.click();
    }, 2000)
})