制作轮播图

最新推荐文章于 2023-01-05 12:13:06 发布

w1021359259

最新推荐文章于 2023-01-05 12:13:06 发布

阅读量85

点赞数

分类专栏： JS 文章标签： HTML CSS JavaScript 交互设计轮播图

本文链接：https://blog.csdn.net/w1021359259/article/details/119593544

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先是要先把静态网页给画出来，我的习惯是，不管写什么网页，第一步都是把静态网页写出来

html和css内容如下

这里静态网页就做好了，接下来就正式开始写入交互内容

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            margin: 20px auto;
            position: relative;
        }

        img {
            width: 800px;
        }

        ul {
            position: absolute;
            height: 20px;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        li.active {
            background-color: red;
        }

        .arrow {
            position: absolute;
            font-size: 30px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            color: white;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        .arrow:hover {
            background-color: rgba(255, 255, 255, 0.3)
        }

        .left {
            left: 10px;
        }

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

<body>
    <div class="box">
        <img src="">
        <ul>
        </ul>
        <div class="left arrow">&lt;</div>
        <div class="right arrow">&gt;</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 定义一个数组，保存所有的图片信息
        let imgs = ['http://p1.music.126.net/7r8YaTZTZR0rBaEiytNaKg==/109951166163724421.jpg?imageView&quality=89',
            'http://p1.music.126.net/EtQe98MM6nqkWVN2qRwJcQ==/109951166164219133.jpg?imageView&quality=89',
            'http://p1.music.126.net/ki3TM2tt0abtK0bidRkk2Q==/109951166163229260.jpg?imageView&quality=89',
            'http://p1.music.126.net/_l9QReWvbAHvqBspgiPr3Q==/109951166164220741.jpg?imageView&quality=89',
            'http://p1.music.126.net/agUAr5UT97of8kt-JViQMw==/109951166164222770.jpg?imageView&quality=89',
            'http://p1.music.126.net/qxFE0is05MMfq4_ESlmafQ==/109951166164227217.jpg?imageView&quality=89']
        // 创建小点
        imgs.forEach(function (item, index) {
            // 每循环一次，需要创建一个li
            let li = $('<li>')
            //第一次循环
            if (index === 0) {
                // 第一个li高亮显示
                li.addClass('active')
                // 图片默认显示第一张
                $('img').attr('src', item)
            }
            $('ul').append(li)
        })
        // 定义数组的下标
        let index = 0

        // 启动定时器的方法
        let timer = null;
        function run() {
            timer = setInterval(() => {
                //数组的下标每次加1，如果数组的下标越界了，下标重新从0开始
                if (++index >= imgs.length) index = 0
                change()  //调用切换样式的方法
            }, 3000);
        }
        // 启动定时器
        run()

        // 切换样式的方法
        function change() {
            // 修改图片的src属性
            $('img').attr('src', imgs[index])
            // 切换li的高亮
            $('li').eq(index).addClass('active').siblings('.active').removeClass('active')
        }

        // 鼠标进入.box容器事件
        $('.box').mouseenter(function () {
            // 清除定时器
            clearInterval(timer)
        })
        // 鼠标离开.box容器事件
        $('.box').mouseleave(function () {
            // 启动定时器
            run()
        })

        // 左箭头点击事件
        $('.left').click(function () {
            // 下标减1，如果下标的值小于0，下标重新从数组的最后一个下标开始
            if (--index < 0) index = imgs.length - 1
            change()  //调用切换样式的方法
        })

        // 右箭头点击事件
        $('.right').click(function () {
            //数组的下标每次加1，如果数组的下标越界了，下标重新从0开始
            if (++index >= imgs.length) index = 0
            change()  //调用切换样式的方法
        })

        // 给li注册点击事件
        $('li').click(function(){
            // 获取点击的li的索引
            index = $(this).index()
            change()  //调用切换样式的方法
        })
    </script>
</body>

</html>