[英]jQuery carousel slider autoplay
I created a simple jQuery carousel slider and I want it to auto play and when been hovered upon it should pause but i cant achieve that. 我创建了一个简单的jQuery轮播滑块,希望它自动播放,将鼠标悬停在它上面时应该暂停,但我无法实现。
And here is the code of the jQuery slider and i need it to autoplay and pause on hover: 这是jQuery滑块的代码,我需要它自动播放并在悬停时暂停:
Css 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 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>
My custom jQuery code: 我的自定义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'
})
});
I think you can use the Autoscroll plugin 我认为您可以使用自动滚动插件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.