jQuery的滚动悬停效果

最新推荐文章于 2021-12-17 17:37:46 发布

原创最新推荐文章于 2021-12-17 17:37:46 发布 · 779 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的轮播图自动切换效果，包括HTML结构、CSS样式及JavaScript代码。通过设置定时器，轮播图可以实现图片的自动切换，并在鼠标移入时停止切换，在鼠标移出时继续自动播放。

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

<script>
    var index=0;
    var timer = playerAdvert();

    //鼠标效果
    $("#carousel_list a img").mouseenter(function () {
        // 鼠标移入
        clearInterval(timer);
    }).mouseleave(function () {
        // 鼠标移出
        timer = playerAdvert();
    });
//把 切换效果 封装
function playerAdvert(){
    return setInterval(function(){
        if(index >= 4){
            index = 0;
        }
        $("#carousel_list a").hide();
        $("#carousel_list a").eq(index).show();
        index++;
    }, 1000);
}

</script>


<!--HTML部分-->
<!-- 轮播-->
<div id="carousel">
    <div id="carousel_list">
        <a href="#"><img src="images/carousel_01.jpg" alt="淘宝1号"></a>
        <a href="#"><img src="images/carousel_02.jpg" alt="淘宝2号"></a>
        <a href="#"><img src="images/carousel_03.jpg" alt="淘宝3号"></a>
        <a href="#"><img src="images/carousel_04.jpg" alt="淘宝4号"></a>
    </div>
</div>


<!--CSS部分-->
#carousel{
    width: 520px;
    height: 280px;
    border:1px solid #666;
    /*overflow:hidden;*/
}

#carousel_list a {
    display:block;
}
#carousel_list a img{
    border: 0px;
    float: left;
}
/*四张照片都重叠*/
#carousel_list a{
    position:absolute;
}