jQuery实现轮播图（自动+手动）（一）

最新推荐文章于 2024-08-27 19:30:26 发布

H某人

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量1.4k

点赞数

文章标签： css3 jquery 网页设计 html5

本文链接：https://blog.csdn.net/weixin_45891980/article/details/104831620

版权

jQuery实现轮播图（自动+手动）（一）

此代码可直接使用

推荐先直接复制此代码运行，对此功能的实现做一个初步的了解

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>JQuery轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 400px;
            /* overflow: hidden; */
            position: relative;
            margin: 0 auto;
        }

        .list {
            width: 3000px;
            height: 400px;
            position: absolute;

        }

        .list>img {
            float: left;
            width: 600px;
            height: 400px;
        }

        .pointer {
            position: absolute;
            width: 100px;
            bottom: 20px;
            left: 250px;
        }

        .pointer>span {
            cursor: pointer;
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #7b7d80;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        .pointer .on {
            background: #28a4c9;
        }

        .arrow {
            position: absolute;
            text-decoration: none;
            width: 40px;
            height: 40px;
            background: #727d8f;
            color: #fff;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
            top: 180px;
            display: none;
        }

        .arrow:hover {
            background: #0f0f0f;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .container:hover .arrow {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 存放轮播图片的div -->
        <div class="list" style="left:0px;">
            <img src="./images/photo1.jpg" alt="1" />
            <img src="./images/photo2.jpg" alt="2" />
            <img src="./images/photo3.jpg" alt="3" />
            <img src="./images/photo4.jpg" alt="4" />
            <img src="./images/photo5.jpg" alt="5" />
        </div>

        <!-- 放置切换小点的div -->
        <div class="pointer">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <div>春蚕到死丝方尽，蜡炬成灰泪始干</div>
        <!-- 存放左右两个箭头 -->
        <a href="#" rel="external nofollow" rel="external nofollow" class="arrow left">&lt;</a>
        <a href="#" rel="external nofollow" rel="external nofollow" class="arrow right">&gt;</a>
    </div>
    <!-- 引入jQuery库 -->
    <script src="./jquery.min.js"></script>
    <script>
        // 定义函数分别表示轮播图片数量，索引号，当前位置，点的代号
        var imgCount = 5;
        var index = 1;
        var intervalId;
        // 。pointer是点的父级
        var buttonSpan = $('.pointer')[0].children; //htmlCollection 集合
        //自动轮播功能 使用定时器
        autoNextPage();
        // 下面开始定义方法autoNextPage的具体过程
        function autoNextPage() {
            // setinterval(code,millisec)这个方法中。
            // code表示要调用或执行的代码串，millisec是调用code的时间间隔
            intervalId = setInterval(function () {
                nextPage(true);
            }, 1000);
        }
        //当鼠标移入 停止轮播
        $('.container').mouseover(function () {
            console.log('hah');
            clearInterval(intervalId);
        });
        // 当鼠标移出，开始轮播container是总盒子
        $('.container').mouseout(function () {
            autoNextPage();
        });
        //点击下一页 上一页的功能 right是右箭头
        $('.right').click(function () {
            nextPage(true);
        });
        // left是左箭头
        $('.left').click(function () {
            nextPage(false);
        });
        //小圆点的相应功能 事件委托
        clickButtons();

        function clickButtons() {
            var length = buttonSpan.length;
            for (var i = 0; i < length; i++) {
                buttonSpan[i].onclick = function () {
                    $(buttonSpan[index - 1]).removeClass('on');
                    if ($(this).attr('index') == 1) {
                        index = 5;
                    } else {
                        index = $(this).attr('index') - 1;
                    }
                    nextPage(true);

                };
            }
        }

        function nextPage(next) {
            var targetLeft = 0;
            //当前的圆点去掉on样式
            $(buttonSpan[index - 1]).removeClass('on');
            if (next) { //往后走
                if (index == 5) { //到最后一张，直接跳到第一张
                    targetLeft = 0;
                    index = 1;
                } else {
                    index++;
                    targetLeft = -600 * (index - 1);
                }

            } else { //往前走
                if (index == 1) { //在第一张，直接跳到第五张
                    index = 5;
                    targetLeft = -600 * (imgCount - 1);
                } else {
                    index--;
                    targetLeft = -600 * (index - 1);
                }

            }
            // list是img的父级
            $('.list').animate({
                left: targetLeft + 'px'
            });
            //更新后的圆点加上样式
            $(buttonSpan[index - 1]).addClass('on');


        }
    </script>
</body>

</html>