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. SQL 2005远程连接是出错（provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议

    SQL 2005远程连接是出错(provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议 sql远程连接服务器网络sql serversqlserver 解决方法:在服务 ...

  2. workflow4.0持久化

    WF4中的持久化模型有了很大的变化. SqlWorkflowInstanceStore是WF提供给我们的开箱即用的类,它会将工作流数据保存到SQL Server 2005或是2008中.该类从Inst ...

  3. NeoOcean - Unity3D Ocean Waves Simulation

    GMail: bearworks8@gmail.com QQMail:196221347@qq.com QQ Group:391782326 Dropbox Demo:  https://www.dr ...

  4. poj1743 Musical Theme（后缀数组|后缀自动机）

      [题目链接] http://poj.org/problem?id=1743     [题意]     求不可重叠最长重复子串.   2015-11-27 [思路] 1)      据题意处理字符串 ...

  5. [Java] Map / HashMap - 源代码学习笔记

    Map 1. 用于关联 key 和 value 的对象,其中 key 与 key 之间不能重复. 2. 是一个接口,用来代替 Java 早期版本中的 Dictionary 抽象类. 3. 提供三种不同 ...

  6. Wireshark 基本介绍和学习 TCP 三次握手

    这篇文章介绍另一个好用的抓包工具 Wireshark, 用来获取网络数据封包,包括 HTTP.TCP.UDP 等网络协议包. 记得大学的时候就学习过TCP的三次握手协议,那时候只是知道,虽然在书上看过 ...

  7. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  8. Hadoop入门--HDFS（单节点）配置和部署 (一)

    一 配置SSH 下载ssh服务端和客户端 sudo apt-get install openssh-server openssh-client 验证是否安装成功 ssh username@192.16 ...

  9. Hard 不用+号实现两个数之和 @CareerCup

    例子: 759+674 1)不考虑进位:   323 2)只考虑进位:1110 3)两者之和:1433 递归求解c package Hard; /** * Write a function that ...

  10. 使用Linux的命令行工具做简单的文本分析

    Basic Text Analysis with Command Line Tools in Linux | William J Turkel 这篇文章非常清楚的介绍了如何使用Linux的命令行工具进 ...