Javascript jQuery转盘滑块自动播放_Javascript_Jquery

Javascript jQuery转盘滑块自动播放

javascript jquery

Javascript jQuery转盘滑块自动播放,javascript,jquery,Javascript,Jquery,我创建了一个简单的jquerycarousel滑块，我希望它能够自动播放，当它被悬停在上面时应该会暂停，但我无法实现这一点这是jQuery滑块的代码，我需要它自动播放并暂停悬停： Css .image-shown{ display: inline-block; } .image-hidden{ display: none; } .carousel-inner{ width: 750px; height: 300px; float: l

我创建了一个简单的jquerycarousel滑块，我希望它能够自动播放，当它被悬停在上面时应该会暂停，但我无法实现这一点

这是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>

我想你可以用

$(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'
    })
});