JS 5.31 商品轮播图综合案例*

k1076731326

于 2024-05-31 14:49:36 发布

阅读量84

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/k1076731326/article/details/139352502

版权

window.addEventListener('load', function () {
    // 获取左右箭头按钮和内容容器
    var arrow_l = document.querySelector('.arrow-l')
    var arrow_r = document.querySelector('.arrow-r')
    var content = document.querySelector('.content')

    // 鼠标移入内容容器时显示箭头按钮并清除定时器
    content.addEventListener('mouseover', function () {
        arrow_l.style.display = 'block'
        arrow_r.style.display = 'block'
        clearInterval(timer)
        timer = null
    })

    // 鼠标移出内容容器时隐藏箭头按钮并重新设置定时器
    content.addEventListener('mouseout', function () {
        arrow_l.style.display = 'none'
        arrow_r.style.display = 'none'
        timer = setInterval(function () {
            arrow_r.click()
        }, 3500)
    })

    // 动态生成小圆圈
    var ul = content.querySelector('ul')
    var ol = content.querySelector('ol')
    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 = 'yellow'

            // 点击小圆圈移动图片
            var index = this.getAttribute('index'); // 获取被点击小圆圈的索引号

            // 更新当前显示的图片索引为被点击小圆圈的索引
            num = index;

            // 更新当前高亮的小圆圈索引为被点击小圆圈的索引
            circle = index;

            // 执行动画，移动图片容器到相应位置
            animate(ul, -index * 590)
        })
    }

    // 默认第一个小圆圈为黄色
    ol.children[0].className = 'yellow'

    // 克隆ul的第一个li，添加到ul的最后
    var first = ul.children[0].cloneNode(true)
    ul.append(first)

    var num = 0
    var circle = 0 // 用于控制小圆圈的变化

    // 右箭头点击事件
    arrow_r.addEventListener('click', function () {
        // 如果到达最后一张克隆图片，ul的left值重置为0
        if (num == 4) {
            ul.style.left = 0
            num = 0
        }
        num++
        animate(ul, -num * 590)
        circle++
        if (circle == 4) {
            circle = 0
        }
        // 更新小圆圈样式
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
            ol.children[circle].className = 'yellow'
        }
    })

    // 左箭头点击事件
    arrow_l.addEventListener('click', function () {
        // 如果到达第一张图片，ul的left值设置为最后一张克隆图片的位置
        if (num == 0) {
            ul.style.left = -4 * 590 + 'px'
            num = 4
        }
        num--
        animate(ul, -num * 590)
        circle--
        if (circle < 0) {
            circle = 3
        }
        // 更新小圆圈样式
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
            ol.children[circle].className = 'yellow'
        }
    })

    // 自动播放设置
    var timer = setInterval(function () {
        // 手动调用右箭头点击事件
        arrow_r.click()
    }, 3500)
})

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部 JavaScript 文件 -->
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
    <!-- 内部 CSS 样式 -->
    <style>
        /* 通用样式重置 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 链接样式 */
        a {
            color: white;
            text-decoration: none;
        }

        /* 列表项样式 */
        li {
            list-style: none;
        }

        /* 图片轮播容器样式 */
        .scroll_img {
            position: relative;
            width: 590px;
            height: 470px;
            margin: 10px auto;
        }

        /* 左右箭头按钮样式 */
        .arrow-l,
        .arrow-r {
            display: none;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            width: 25px;
            height: 35px;
            font-size: 20px;
            background: rgba(255, 255, 255, .7);
            line-height: 35px;
            z-index: 2;
        }

        .arrow-l {
            border-radius: 0 20px 20px 0;
            left: 0;
        }

        .arrow-r {
            border-radius: 20px 0 0 20px;
            text-align: right;
            right: 0;
        }

        /* 圆点导航容器样式 */
        .circle {
            position: absolute;
            bottom: 20px;
            left: 50px;
            width: 150px;
            height: 17px;
        }

        .circle li {
            float: left;
            width: 17px;
            height: 17px;
            background: rgba(255, 255, 255, .7);
            border-radius: 8.5px;
            margin-left: 3px;
        }

        /* 当前激活圆点样式 */
        .yellow {
            background: rgba(252, 169, 87, 0.8) !important;
        }

        /* 内容溢出隐藏 */
        .scroll_img {
            overflow: hidden;
        }

        /* 内容列表样式 */
        .content ul {
            width: 600%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .content ul li {
            float: left;
        }
    </style>
</head>

<body>
    <!-- 图片轮播组件 -->
    <div class="scroll_img">
        <div class="content">
            <!-- 左侧按钮 -->
            <a href="javascript:;" class="arrow-l">&lt;</a>
            <!-- 右侧按钮 -->
            <a href="javascript:;" class="arrow-r">&gt;</a>
            <!-- 图片列表 -->
            <ul>
                <li>
                    <a href="#"><img src="images/q.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/q (1).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/q (2).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/q (3).jpg" alt=""></a>
                </li>
            </ul>
            <!-- 圆点导航 -->
            <ol class="circle">

            </ol>
        </div>
    </div>
</body>

</html>

/* 动画函数 */
function animate(obj, target, callback) {
    // 先清理以前的定时器，避免定时器的叠加
    // 加入callback回调函数
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 计算每次移动的步长 (缓动效果)
        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();
            }
        }
        // 否则继续移动
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15); // 每15毫秒执行一次
}