轮播图案例

最新推荐文章于 2024-08-23 20:55:13 发布

zhou_nj

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量76

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zhou_nj/article/details/120171495

版权

1.通过DOM显示轮播图效果，代码如下：

<!DOCTYPE html>
<html>

<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>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        *{
            list-style: none;
        }
        /* 轮播图容器 */
        .lunbo {
            width: 800px;
            height: 350px;
            margin: 20px auto;
            /* 相对定位 */
            position: relative;
        }

        /* 轮播图图片 */
        .lunbo img {
            width: 800px;
            height: 350px;
        }

        /* 小按钮 */
        .dot {
            /* 绝对定位 */
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            display: flex;
        }

        .dot li {
            width: 8px;
            height: 8px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;          
            cursor: pointer;
        }

        .dot li.active {
            background-color: tomato;
        }

        /* 箭头 */
        .arrow {
            width: 50px;
            height: 80px;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            color: #666;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            cursor: pointer;
        }

        .arrow:hover {
            background-color: rgba(173, 216, 230, 0.5);
        }

        .left {
            left: 10px;
        }

        .right {
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="lunbo">
        <img id="img" src="">
        <ul class="dot flex j-c">
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <div class="left arrow">&lt;</div>
        <div class="right arrow">&gt;</div>
    </div>
    <script>
        // 定义图片数组
        let imgs = ["http://p1.music.126.net/bYpz2EzQtOxLSsKdYFKLlg==/109951166108416305.jpg?imageView&quality=89",
            "http://p1.music.126.net/w5nRr9khPUar7ooD6t-17A==/109951166106560685.jpg?imageView&quality=89",
            "http://p1.music.126.net/PbJe6QR4zDysvMgKJ8VYgQ==/109951166106325434.jpg?imageView&quality=89",
            "http://p1.music.126.net/FrA3j1mgvAmelemjZy3ssw==/109951166107492401.jpg?imageView&quality=89",
            "http://p1.music.126.net/8pnqro4k5TCKE7ZZtnWiuQ==/109951166107492177.jpg?imageView&quality=89",
            "http://p1.music.126.net/ZjnFalihrdOh-nrxxb3yNA==/109951166108228282.jpg?imageView&quality=89"]
        // 定义数组的下标
        let index = 0
        // 获取轮播图容器
        let lunbo = document.querySelector('.lunbo')
        // 获取图片元素
        let img = document.getElementById("img")
        // 显示默认图片
        img.src = imgs[index]

        // 鼠标进入事件轮播容器
        lunbo.onmouseenter = function () {
            // 根据定时器的编号，清除定时器
            clearInterval(timer)
        }
        // 鼠标离开事件离开轮播容器
        lunbo.onmouseleave = function () {
            // 启动定时器
            run()
        }

        // 添加小按钮
        for (let i = 0; i < imgs.length; i++) {
            let li = document.createElement('li')
            document.querySelector('.dot').appendChild(li)
        }
        // 小按钮显示默认高亮
        // classList属性，是类选择器集合，通过add方法添加类选择器，通过remove方法移除类选择器
        document.querySelectorAll('.dot li')[index].classList.add('active')

        // 给小按钮注册点击事件
        document.querySelectorAll('.dot li').forEach(function (li, i) {
            li.onclick = function () {
                //更新显示的下标
                index = i
                // 调用切换显示的方法
                change()
            }
        })

        // 左箭头按钮点击事件
        document.querySelector('.left').onclick = function(){
            //下标减1
            if(--index < 0) index = imgs.length-1  
            // 调用切换显示的方法
            change()
        }
        // 右箭头按钮点击事件
        document.querySelector('.right').onclick = function(){
            //下标加1
            if(++index >= imgs.length) index = 0
            // 调用切换显示的方法
            change()
        }

        // 启动定时器的方法
        let timer = null  //定义定时器变量
        function run() {
            timer = setInterval(() => {
                if (++index >= imgs.length) index = 0
                // 调用切换显示的方法
                change()
            }, 3000);
        }
        // 启动定时器
        run()

        // 切换显示的方法
        function change() {
            // 显示对应的图片
            img.src = imgs[index]
            // 切换高亮小按钮
            document.querySelector('.dot li.active').classList.remove('active')
            document.querySelectorAll('.dot li')[index].classList.add('active')
        }
    </script>
</body>

</html>

zhou_nj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图案例

1.通过DOM显示轮播图效果，代码如下：<!DOCTYPE html><html><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"> &l
复制链接

扫一扫