解决jQuery插件sliderjs, 点击插件分页,导航按钮后不能重新开始.

最新推荐文章于 2020-07-08 02:42:22 发布

weixin_30947043

最新推荐文章于 2020-07-08 02:42:22 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zlog/p/5388077.html

版权

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/27874907@N04/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

转载于:https://www.cnblogs.com/zlog/p/5388077.html