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. IMAP与POP3的区别

    POP3协议允许电子邮件客户端下载服务器上的邮件,但是在客户端的操作(如移动邮件.标记已读等),不会反馈到服务器上.比如通过客户端收取了邮箱中的2封邮件并移动到其他文件夹,邮箱服务器上的这些邮件是没有 ...

  2. -_-#【JS】isFinite

    /** * isFinite(number) * 检查是否是无穷大 * 如果 number 是有限数字(或可转换为有限数字),那么返回 true * 如果 number 是 NaN(非数字),或者是正 ...

  3. （转载）mysql 存在该记录则更新，不存在则插入记录的sql

    (转载)http://www.codesky.net/article/201003/105754.html 代码如下: INSERT table (auto_id, auto_name) values ...

  4. 使用yum快速升级CentOS 6.5内核到 3.10.28

    网上有不少升级CentOS内核的文章,如<CentOS 6.5 升级内核到 3.10.28>,大部分都是下载源码编译,有点麻烦. 在yum的ELRepo源中,有mainline(3.13. ...

  5. HDOJ 2073 无限的路

    Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现上面的图还 ...

  6. DFS Zoj 2110

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

  7. 滑雪 （搜索）（dp）（贪心）

    以每一点为起点找出所有路径,并求出以此点做为起点的最大路径 求出每个点的最大路径后再找出其中最大的值,输出最大值 #include <stdio.h>#include <string ...

  8. [转]浏览器如何和Web服务器通信

    http://hi.baidu.com/ywqme/item/b5297014b2e58f4e6826bb74 概述 普通网民打开网页,访问网站,并不需要了解所谓HTTP协议.作为软件工程师,了解一下 ...

  9. 带你一分钟理解 JavaScript 闭包

    什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...

  10. segment

    1.segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegm ...