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. NodeJS制作爬虫全过程

    这篇文章主要介绍了NodeJS制作爬虫的全过程,包括项目建立,目标网站分析.使用superagent获取源数据.使用cheerio解析.使用eventproxy来并发抓取每个主题的内容等方面,有需要的 ...

  2. hdu-2586-How far away ？(离线LCA)

    题意: 给定一棵树,每条边都有一定的权值,q次询问,每次询问某两点间的距离. 分析: 这样就可以用LCA来解,首先找到u, v 两点的lca,然后计算一下距离值就可以了. 这里的计算方法是,记下根结点 ...

  3. HDU Collect More Jewels 1044

    BFS + 状态压缩 险过 这个并不是最好的算法 但是写起来比较简单 , 可以AC,但是耗时比较多 下面是代码 就不多说了 #include <cstdio> #include <c ...

  4. 网络流（最大密集度子图，分数规划）：UvaLive 3709 Hard Life

    John is a Chief Executive Officer at a privately owned medium size company. The owner of the company ...

  5. 生成树的计数(基尔霍夫矩阵)：UVAoj 10766 Organising the Organisation SPOJ HIGH - Highways

    HIGH - Highways   In some countries building highways takes a lot of time... Maybe that's because th ...

  6. Shader Forge 刀光溶解

    实际特效时,时间可以控制vertex color.a,shader forge 还只是玩具,试验用具,离商业产品质量还有差距. 其实,有技术美术的画,很多问题,美术能自己解决,都是一些欠缺通道的问题, ...

  7. HDOJ(HDU) 2123 An easy problem(简单题...)

    Problem Description In this problem you need to make a multiply table of N * N ,just like the sample ...

  8. DFS Zoj 2110

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2110 //2110 #include<stdio.h> #in ...

  9. postgresql使用文档之一 初始化数据存储区

    17.2. 创建一个数据库集群(Database Cluster) 在你能做任何事情之前,你必须在磁盘上初始化一块存储空间.我们称这为一个数据库集群(database cluster). 一个Data ...

  10. 广度优先搜索BFS

    广度优先搜索可以形成一个广度优先搜索树 算法时间为O(V+E),两重循环 输入:图g,起点start(int) 需要的数据结构:队列Q.color数组(存放每个顶点的颜色) 算法过程: 1. 预处理: ...