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

解决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. Sudoku(回溯)

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 12075   Accepted: 6026   Special Judge ...

  2. [转]关于Icon，Image，ImageIcon的简单的对比参考

    转自:http://blog.csdn.net/bcmissrain/article/details/7190886 其实就算是现在,我还是有不少地方概念模糊,但是下面的内容是是没有什么问题的.稍微介 ...

  3. 总结linux无线命令wpa

    关于wpa_supplicant: 用到wpa_cli命令 wpa_cli -iwlan0 add_network             // wlan0 是无线网络设备的名字,增加一个网络,会返回 ...

  4. 【模拟】Codeforces 711A Bus to Udayland

    题目链接: http://codeforces.com/problemset/problem/711/A 题目大意: N个字符串,每个字符串5位,找到第一个出现两个OO的并改成++输出YES和改后字符 ...

  5. [Locked] Sparse Matrix Multiplication

    Given two sparse matrices A and B, return the result of AB. You may assume that A's column number is ...

  6. Uva1343-The Rotation Game-IDA*算法

    原题https://uva.onlinejudge.org/external/13/1343.pdf 题意: 有个#字型的棋盘,2行2列,一共24个格. 如图:每个格子是1或2或3,一共8个1,8个2 ...

  7. kvm编译安装及常见问题解决

    一.KVM的编译安装 1.安装基本系统和开发工具 1.1 编译内核 mkdir /root/kvm cd /root/kvm wget http://www.kernel.org/pub/linux/ ...

  8. Oulipo - HDU 1686 （KMP模板题）

    题目大意:题目叙述很多,其实只看输入输出也能明白什么意思,给两个串W,T, 判断T串中包含几个串W.   分析:还是基础的KMP应用....................... 直接上代码. === ...

  9. 一步一步学android之事件篇——单击事件

    在使用软件的时候单击事件必不可少,比如我想确定.取消等都需要用户的单击,所有的单击事件都是由View.OnClickListener接口来进行处理的,接口定义如下: public static int ...

  10. Solr和ES对比

    Solr与ES(ElasticSearch)对比 搜索引擎选择: Elasticsearch与Solr 搜索引擎选型调研文档 Elasticsearch简介* Elasticsearch是一个实时的分 ...