jQuery转盘滑块自动播放

jQuery carousel slider autoplay

本文关键字：自动播放 jQuery      更新时间：2023-09-26

我创建了一个简单的jQuery旋转木马滑块，我希望它能自动播放，当它悬停在上面时应该会暂停，但我无法实现。

这是jQuery滑块的代码，我需要它来自动播放并在悬停时暂停：

Css

     .image-shown{
    display: inline-block;
     }
.image-hidden{
    display: none;
}
.carousel-inner{
    width: 750px;
    height: 300px;
    float: left;
}
.carousel-inner img{
    width: 100%;
    height: 100%;
}
.previouslink, .nextlink{
    float: left;
    margin-top:150px;
}
.previouslink{
    margin-right:20px;
}
.nextlink{
    margin-left:20px;
}

HTML

<!doctype>
<html>
<head>
    <title>slider</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="page">
        <h2>jQuery IMAGE</h2>
        <div class="carousel-outer"> 
            <a href="#" class="previouslink">Previous</a>
                <div class="carousel-inner"> 
                    <img class="image-shown imagess" src="img/bridge.jpg" alt="" />
                    <img class="image-hidden imagess" src="img/cool.jpg" alt="" />
                    <img class="image-hidden imagess" src="img/house.jpg" alt="" />
                    <img class="image-hidden imagess" src="img/lion.jpg" alt="" />
                    <img class="image-hidden imagess" src="img/nature.jpg" alt="" />
                </div>
            <a href="#" class="nextlink">Next</a>
        </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

我的自定义jQuery代码：

$(document).ready(function(){
    $(".nextlink").on("click", function(e){
            var currentActiveImage = $(".image-shown");
            var nextActiveImage = currentActiveImage.next();
            if(nextActiveImage.length == 0){
                nextActiveImage= $(".carousel-inner img").first();
            }
            currentActiveImage.removeClass("image-shown").addClass("image-hidden").css("z-index", -10);
            nextActiveImage.addClass("image-shown").removeClass("image-hidden").css("z-index", 20);
            $(".carousel-inner img").not([currentActiveImage, nextActiveImage]).css("z-index", 1);
            e.preventDefault();
    });
        $(".previouslink").on("click", function(e){
            var currentActiveImage = $(".image-shown");
            var nextActiveImage = currentActiveImage.prev();
            if(nextActiveImage.length == 0){
                nextActiveImage= $(".carousel-inner img").last();
            }
            currentActiveImage.removeClass("image-shown").addClass("image-hidden").css("z-index", -10);
            nextActiveImage.addClass("image-shown").removeClass("image-hidden").css("z-index", 20);
            $(".carousel-inner img").not([currentActiveImage, nextActiveImage]).css("z-index", 1);
            e.preventDefault();
        });
});

$(function(){ 
    $('.jcarousel').jcarousel();
    $('.jcarousel').jcarouselAutoscroll({
        interval: 1000,
        target: '+=1'
    })
});

我认为您可以使用Autoscroll插件

相关文章：