轮播图----三次互动（尾张猫腻图）

最新推荐文章于 2022-03-24 15:04:40 发布

AC_QI

最新推荐文章于 2022-03-24 15:04:40 发布

阅读量70

点赞数

分类专栏：轮播图文章标签： js jquery

本文链接：https://blog.csdn.net/m0_60297110/article/details/119901306

版权

轮播图专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

        .list {
            width: 560px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .content {
            width: 3000px;
            height: 300px;
            /*清除默认间距 */
            font-size: 0;
            position: absolute;
            left: 0px;
        }

        .content img {
            width: 560px;
            height: 300px;
        }

        .prev,
        .next {
            position: absolute;
            top: 50%;
            left: 0;
            width: 30px;
            height: 35px;
            margin-top: -25px;
            color: white;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 30px;
            text-align: center;
            line-height: 30px;
        }

        .prev {
            left: 0;
        }

        .next {
            left: 530px;
        }

        .btns {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 30px;
            text-align: center;
        }

        .btns span {
            padding: 5px;
            font-size: 0;
            margin: 0 5px;
            background-color: white;
            border-radius: 50%;
        }

        .btns .choose {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- div.list>img[src=../图片/$@0.jpg]*5+(div.btns>span*5)+div.prev{<}+div.next{>} -->
    <div class="list">
        <div class="content">
            <img src="../图片/1.jpg" alt="">
            <img src="../图片/9.jpg" alt="">
            <img src="../图片/4.jpg" alt="">
            <img src="../图片/5.jpg" alt="">
            <img src="../图片/6.jpg" alt="">
        </div>
        <div class="btns">
            <span class="choose"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="prev">&lt;</div>
        <div class="next">&gt;</div>
    </div>
    <script src="../06.1jQ手风琴等小动画/jQuery/jquery01.js"></script>
    <script>
        //维护当前显示图片的索引值
        var $content = $('.content');
        var $btns = $('.btns span');
        var index = 0;
        //循环定时器
        var timebar;
        //启动轮播函数
        function startInterval() {
            timebar = setInterval(function () {
                console.log(index);
                //显示下一张
                index++;
                //判断边界
                if (index >= 5) {
                    index = 0;
                };
                //更改content位置
                //此处用 ctt不能用this无需返回
                change();
            }, 3000)
        }
        //启动轮播
        startInterval();

        //更改图片及位置
        function change(fn) {
            $content.stop(true).animate({ left: -index * 560 }, 500, function () {
                //更新小圆点
                $btns
                    .eq(index).addClass('choose')
                    //兄弟节点，删除choose类//注意：此处不用加小圆点
                    .siblings().removeClass('choose')
                fn && fn();
            })
        };

        //给按钮绑定事件，点击第几个按钮，跳转到第几张图
        $btns.click(function () {
            //清空轮播，点击暂停
            clearInterval(timebar)
            //1.获取按钮是第几个，及获取属性值
            index = $(this).index();
            // //2.更改content位置
            // change(function () {
            //     startInterval();
            // });
            //传递结果
            change(startInterval);
            //3.修改按钮样式

        })

        //下一张
        $('.next').click(function () {
            //清除定时器
            clearInterval(timebar);
            //更改索引值
            index++;
            //边界处理
            if (index >= 5) {
                index = 0
            }
            //切换图片
            change(startInterval);
        })
        //上一张
        $('.prev').click(function () {
            //清除定时器
            clearInterval(timebar);
            //更改索引值
            index--;
            //边界处理
            if (index < 0) {
                index = 4
            }
            //切换图片
            change(startInterval);
        })
    </script>
</body>

</html>

AC_QI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图----三次互动（尾张猫腻图）

<!DOCTYPE html><html lang="en"><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>D.
复制链接

扫一扫

专栏目录