昨晚用jQuery写了一个轮播图

最新推荐文章于 2025-03-11 11:28:52 发布

沉浸在代码无法自拔

最新推荐文章于 2025-03-11 11:28:52 发布

阅读量244

点赞数

文章标签： js jQuery

本文链接：https://blog.youkuaiyun.com/p1766__66668/article/details/92389402

版权

本文介绍了一个使用计时器、数组和鼠标事件实现的轮播图功能，包括自动播放、鼠标交互控制和小圆点导航。通过HTML、CSS和jQuery代码，实现了图片自动轮播、鼠标悬停停止及切换图片等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整个思路用到了计时器，数组，鼠标移入移出事件，鼠标点击事件。

下面是启动运行的效果图，他会每隔一秒换一张图片，当然这个时间间隔可以自己定

当鼠标放到图片上时会自动显示左右箭头，轮播不受影响，离开则左右箭头消失

当鼠标悬停在左右箭头上时，会自动停止轮播，鼠标离开则自动开始轮播，当鼠标点击左右箭头时会自动切换上一张图片或者下一张图片，

当鼠标悬停在小圆点数字上时会自动切换到对应的图片，离开则继续自动轮播，如果鼠标悬浮在第2个小圆点上再离开，那么下一张要显示的图片就是小圆点3对应的图片，依此顺序

下面附一张项目结构图

下面是HTML代码，包括一个6个小数字，两个左右箭头，左右箭头是大于号和小于号

<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div>
    <div class="arrowRight">></div>
</div>

下面是CSS代码

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.adver {
    margin: 0 auto;
    width: 700px;
    overflow: hidden;
    height: 454px;
    position: relative;
    background: url("../images/adver01.jpg");

}

ul {
    position: absolute;
    bottom: 10px;
    z-index: 100;
    width: 100%;
    text-align: center;
}

ul li {
    display: inline-block;
    font-size: 10px;
    line-height: 20px;
    font-family: "微软雅黑";
    margin: 0 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333333;
    text-align: center;
    color: #ffffff;
}

.arrowLeft, .arrowRight {
    position: absolute;
    width: 30px;
    background: rgba(0, 0, 0, 0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top: 200px;
    z-index: 150;
    font-family: "微软雅黑";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}

.arrowLeft {
    left: 10px;
}

.arrowRight {
    right: 10px;
}

li:nth-of-type(1) {
    background: orange;
}

下面是js，jQuery代码

<script>
    var images = ["adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg"];
    var liNum = document.getElementsByTagName("li"); //获取所有li标签
    var index = 0; //图片下标
    var indexLi = 1;  //li位置
    var time = null; //计时

    /**
     * 图片自动轮播
     */
    function autoPlay() {
        time = setInterval("timer()", 1000);
    };


    /**
     * 图片停止轮播
     */
    function stopPlay() {
        clearInterval(time);
    };

    $(function () { //页面加载时图片开始轮播
        autoPlay();
    });
    $("ul>li").mousemove(function () { //鼠标悬浮li时停止轮播
        stopPlay();
        var $biu = $(this).index(); //获取当前悬停的li标签的下标
        for (var i = 0; i < liNum.length; i++) {//遍历集合用获取到的下标做匹配
            if ($biu == i) {
                index = i;
                indexLi = i + 1;
                $(".adver").css({"background": "url(images/" + images[index] + ")"});
                $("li:nth-of-type(" + indexLi + ")").css({"background": "orange"});
                $("li:nth-of-type(" + indexLi + ")").siblings().css({"background": "#333333"});

            }
        }


    }).mouseout(function () { //鼠标离开li时调用自动轮播函数
        autoPlay();
    });

    $(".adver").mouseover(function () { //鼠标移入显示左右箭头
        $(".arrowLeft").show();
        $(".arrowRight").show();
    }).mouseout(function () {  //鼠标移出隐藏左右箭头
        $(".arrowLeft").hide();
        $(".arrowRight").hide();
    });
    /**
     * 当鼠标悬停在左箭头时停止轮播
     */
    $(".arrowLeft").mouseover(function () {
        stopPlay();
    }).mouseout(function () {  //离开时继续轮播
        autoPlay();
    });
    $(".arrowRight").mouseover(function () { //当鼠标悬停在右箭头时停止轮播
        stopPlay();
    }).mouseout(function () { //离开时继续轮播
        autoPlay();
    });

    $(".arrowLeft").click(function () { //点击左箭头切换上一张图片
        if (index == 0) {
            index = 5;
            indexLi = 6;
        } else {
            index--;
            indexLi--;
        }
        $(".adver").css({"background": "url(images/" + images[index] + ")"});
        $("li:nth-of-type(" + indexLi + ")").css({"background": "orange"});
        $("li:nth-of-type(" + indexLi + ")").siblings().css({"background": "#333333"})
    });
    $(".arrowRight").click(function () { //点击右箭头切换下一张图片
        if (index == images.length - 1) {
            index = 0;
            indexLi = 1;
        } else {
            index++;
            indexLi++;
        }
        $(".adver").css({"background": "url(images/" + images[index] + ")"});
        $("li:nth-of-type(" + indexLi + ")").css({"background": "orange"});
        $("li:nth-of-type(" + indexLi + ")").siblings().css({"background": "#333333"});
    });
    function timer() {
        if (index == 5) {
            indexLi = 1;
            index = 0;
        } else {
            index++;
            indexLi++;
        }
        $(".adver").css({"background": "url(images/" + images[index] + ")"})
        $("li:nth-of-type(" + indexLi + ")").css({"background": "orange"})
        $("li:nth-of-type(" + indexLi + ")").siblings().css({"background": "#333333"})
    };


</script>