Question

我创建了一个简单的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();

        });
});

Answer 1

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

我认为您可以使用Autoscroll plugin

jQuery轮播滑块自动播放

1 个答案: