jQuery SlidesJS - Can't restart animation after clicking on navigation or pagination

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  5. <script src="http://www.slidesjs.com/examples/playing/js/jquery.slides.min.js"></script>
  6. <meta charset="utf-8">
  7. <title>JS Bin</title>
  8. <style>
  9. #container {
  10.   width: 800px;
  11.   height: 450px;
  12.   overflow: hidden;
  13.   position: relative;
  14. }
  15. .slidesjs-pagination{
  16.   position: absolute;
  17.   bottom: 10px;
  18.   z-index: 9999;
  19.   right: 10px;
  20. }
  21. .slidesjs-pagination {
  22.   margin: 7px 0 0;
  23.   float: right;
  24.   list-style: none;
  25. }
  26. .slidesjs-pagination li a {
  27.   display: block;
  28.   width: 13px;
  29.   height: 0;
  30.   padding-top: 13px;
  31.   background-image: url(http://www.slidesjs.com/img/pagination.png);
  32.   background-position: 0 0;
  33.   float: left;
  34.   overflow: hidden;
  35. }
  36. .slidesjs-pagination li {
  37.   float: left;
  38.   margin: 0 1px;
  39. }
  40. .slidesjs-pagination li a.active,
  41. .slidesjs-pagination li a:hover.active {
  42.   background-position: 0 -13px
  43. }
  44. .slidesjs-pagination li a:hover {
  45.   background-position: 0 -26px
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div id="container">
  51. <div id="slides">
  52.   <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/">
  53.   <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/">
  54.   <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/">
  55.   <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/">
  56. </div>
  57. </div>
  58. <script>
  59. $(function($) {
  60.   var interval = 4000;
  61.   var st = 0;
  62.   var $slides = $('#slides');
  63.   $slides.slidesjs({
  64.     width: 800,
  65.     height: 450,
  66.     play: {
  67.       active: true,
  68.       auto: true,
  69.       interval: interval,
  70.       swap: true,
  71.       pauseOnHover: true
  72.     },
  73.     callback: {
  74.       start: function(number){
  75.         if ( $slides.find('.slidesjs-play').is(':visible')) {
  76.           clearTimeout(st);
  77.           st = setTimeout(function() {
  78.              $slides.find('.slidesjs-play').click();
  79.           }, interval);
  80.         }
  81.       }
  82.     }
  83.   });
  84. });
  85. </script>
  86. <!-- </body>
  87. </html> -->

　　

在线DEMO: http://jsbin.com/cujeqekate

解决jQuery插件sliderjs, 点击插件分页,导航按钮后不能重新开始.的更多相关文章

  1. vue 表格数据编辑，点击取消或者完成按钮后，关闭编辑状态没有及时生效

    点击编辑按钮: 编辑状态下,表格可以编辑.但是点击“确认”或者“取消”按钮,列数据编辑状态已经修改,但是视图没有改变. 页面代码: 获取当前行的index,并直接修改当前行用于判断是否编辑状态的数据为 ...

  2. C#-WebForm-点击网页中的按钮后跳转到其他页面是怎么实现的?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流

    地址有:http://www.17sucai.com/pins/2657.html 如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感 ...

  4. ssi-uploader上传图片插件，点击选择文件按钮自动提交表单解决办法

    先介绍一下这款插件,然后再谈使用中可能遇到的问题 ssi-uploader是一个JQuery的图片上传插件,界面比较美观 github地址:https://github.com/ssbeefeater ...

  5. 基于jquery 的分页插件，前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  6. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  7. Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...

  8. jquery+css3打造一款ajax分页插件

    原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...

  9. 解决jquery.zclip.js插件无法复制的问题

    网页中需要用到点击复制,在使用webpack加载jquery以及jquery.zclip.js后,出现了以下情况: jquery顺利加载 zclip插件顺利加载 ZeroClipboard.swf顺利 ...

随机推荐

  1. 关于Mysql当中"Got error 134 from storage engine"的解决办法

    今天在开发程序的时候,有一个表, 当调用这个类别时总是调用不出来,很是恼火.后台打印sql语句为: SELECT * FROM `xx_article` WHERE `cid1` =6 LIMIT 0 ...

  2. Lowest Common Ancestor in Binary Tree

    The problem: Given node P and node Q in a binary tree T. Find out the lowest common ancestor of the ...

  3. hdu-3487-Play with Chain-(splay 区间翻转，切割，插入)

    题意: 区间翻转,切割,插入 // File Name: ACM/HDU/3487.cpp // Author: Zlbing // Created Time: 2013年08月10日 星期六 21时 ...

  4. （转载）PHP strtotime函数详解

    (转载)http://www.jb51.net/article/21495.htm strtotime函数是一个很好的函数,灵活的运用它,会给你的工作带来不少方便.但PHP的手册中却对此函数的参数没作 ...

  5. HDOJ(HDU) 2148 Score(比较、)

    Problem Description 转眼又到了一年的年末,Lele又一次迎来了期末考试.虽然说每年都要考试,不过今年的这场考试对Lele来说却意义重大. 因为经济原因,如果今年没有排在班级前几名, ...

  6. prim模板题

    题目链接:http://acm.hrbeu.edu.cn/index.php?act=problem&id=1223 #include <cstdio> #include < ...

  7. RabbitMQ-优先级(priority)队列/消息

    就像在日常生活中,事情有轻重缓急一样.我们对于需要处理的消息也有这样的需求. 例如重要的消息我要尽快的得到处理,当然我们可以给重要的消息开个“VIP通道”,但是VIP数量很多,并且VIP也分层次呢? ...

  8. Redis的安装及配置

    Redis安装及主从配置   一.何为Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表) ...

  9. SAP-MM：收货转储时提示 M7053“只能在公司代码 **** 的期间 2014/04 和 2014/03 中记账”

    错误信息   消息号M7053   解决方法 Step 1.使用MMPV进入"关闭账期"界面. Step 2.输入"公司代码"."期间".& ...

  10. Android Scroller类的详细分析

    尊重原创作者,转载请注明出处: http://blog.csdn.net/gemmem/article/details/7321910 Scroller这个类理解起来有一定的困难,刚开始接触Scrol ...