jQuery中的轮播图效果

最新推荐文章于 2022-09-03 10:39:40 发布

XiaoChaoGg丶

最新推荐文章于 2022-09-03 10:39:40 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/weixin_44454319/article/details/101173667

版权

<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
        /*去除内边距,没有链接下划线*/
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*让<body有20px的内边距*/
        body {
            padding: 20px;
        }

        /*最外围的div*/
        #container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative; /*相对定位*/
            margin: 0 auto;
        }

        /*包含所有图片的<div>*/

        #list {
            width: 4200px; /*7张图片的宽: 7*600 */
            height: 400px;
            position: absolute; /*绝对定位*/
            z-index: 1;

        }

        /*所有的图片<img>*/
        #list img {
            float: left; /*浮在左侧*/
        }

        /*包含所有圆点按钮的<div>*/
        #pointsDiv {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 250px;
        }

        /*所有的圆点<span>*/

        #pointsDiv span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            margin-right: 5px;
        }

        /*第一个<span>*/

        #pointsDiv .on {
            background: orangered;
        }

        /*切换图标<a>*/

        .arrow {
            cursor: pointer;
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, 0.3);
            color: #fff;
        }

        /*鼠标移到切换图标上时*/
        .arrow:hover {
            background-color: RGBA(0, 0, 0, 0.7);
        }

        /*鼠标移到整个div区域时*/
        #container:hover .arrow {
            display: block; /*显示*/
        }

        /*上一个切换图标的左外边距*/
        #prev {
            left: 20px;
        }

        /*下一个切换图标的右外边距*/
        #next {
            right: 20px;
        }
    </style>
</head>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="1"/>
    </div>
    <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

<script type="text/javascript" src="js/jquery3.4.1.js"></script>
<script>
    //获取所有图片
    var $list = $("#list")
    //获取下方按钮
    var $span = $("#pointsDiv>span")
    //当前显示图片
    var index = 1;
    //增加判定  判定是否为最后一张
    var isEnd = true;
    //上一张
    $("#prev").click(function () {
        triggerPicture(0);
    })
    //下一张
    $("#next").click(function () {
        triggerPicture(1)
    })

    /*
    设置传入的值
    0  为上一张
    1  为下一张
     */
    function triggerPicture(e) {
        if (isEnd) {
            isEnd = false;
            //判断切换
            if (e == 0) {
                index--;
            } else {
                index++;
            }
            //动画切换图片   设置图片移动距离
            $list.animate({
                left: index * (-600)
            }, 500, function () {
                if (index == 0) {
                    index = 5
                }
                if (index == 6) {
                    index = 1
                }
                $list.css("left", index * (-600))
                //移除下方确认按钮的选择状态
                $span.removeClass("on");
                //根据选择按钮 为其添加选择状态
                $($span.get(index-1)).addClass("on")
                isEnd = true;
            })
        }
    }

    //设置自动切换   定时器
    var time = setInterval(function () {
        //调用切换方法  自动播放下一张
        triggerPicture(1)
    }, 2000)

    //设置鼠标在图片悬停  关闭定时器   鼠标离开图片 开启定时器
    $("#container").hover(function () {
        clearInterval(time)
    }, function () {
        time =setInterval(function () {
            //调用切换方法  自动播放下一张
            triggerPicture()
        }, 2000)
    })
    //设置下方按钮
    $span.click(function () {
        //下标为this当前触发图片的下标
        index = $(this).index()
        //调用切换图片
        triggerPicture()
    })
</script>