jQuery SlidesJS - Can‘t restart animation after clicking on navigation or pagination
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://www.slidesjs.com/examples/playing/js/jquery.slides.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#container {
width: 800px;
height: 450px;
overflow: hidden;
position: relative;
}
.slidesjs-pagination{
position: absolute;
bottom: 10px;
z-index: 9999;
right: 10px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(http://www.slidesjs.com/img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
</style>
</head>
<body>
<div id="container">
<div id="slides">
<img src="http://www.slidesjs.com/examples/playing/img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
<img src="http://www.slidesjs.com/examples/playing/img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
<img src="http://www.slidesjs.com/examples/playing/img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/[email protected]/4833059991/">
<img src="http://www.slidesjs.com/examples/playing/img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
</div>
<script>
$(function($) {
var interval = 4000;
var st = 0;
var $slides = $(‘#slides‘);
$slides.slidesjs({
width: 800,
height: 450,
play: {
active: true,
auto: true,
interval: interval,
swap: true,
pauseOnHover: true
},
callback: {
start: function(number){
if ( $slides.find(‘.slidesjs-play‘).is(‘:visible‘)) {
clearTimeout(st);
st = setTimeout(function() {
$slides.find(‘.slidesjs-play‘).click();
}, interval);
}
}
}
});
});
</script>
<!-- </body>
</html> -->
在线DEMO: http://jsbin.com/cujeqekate
时间： 2024-10-07 19:38:25