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. Linux Kernel ‘test_root()’函数本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘test_root()’函数本地拒绝服务漏洞 CNNVD编号: CNNVD-201306-432 发布时间: 2013-06-25 更新时间: 2013-06- ...

  2. selenium webdriver python 操作Chrome浏览器

    Step1: 下载chromedriver. 下载路径: http://chromedriver.storage.googleapis.com/index.html 选择一个合适的下载即可.我下载的是 ...

  3. Java中对象的深复制和浅复制详解

    1．浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵ ...

  4. DNA repair - HDU 2457（自动机+dp）

    题目大意:给你N个DNA的串,也就是至包含'A','T','G','C'四种碱基的,这些给定的串都是带有遗传病的,然后给你一个不会超过1000的串,问你至少几个地方才能让这个串不包含遗传病,如果不论怎 ...

  5. Let it Bead

    http://poj.org/problem?id=2409 // File Name: poj2409.cpp // Author: bo_jwolf // Created Time: 2013年1 ...

  6. 详细分析 javascript 的内存分配

    JavaScript语言是一门优秀的脚本语言.其中包含脚本语言的灵活性外还拥有许多高级语言的特性.例如充许构建和实例化一个对象,垃圾回 收机制(GC:Garbage Collecation).通常我们 ...

  7. FreeRTOS学习笔记——任务间使用队列同步数据

    1.前言 在嵌入式操作系统中队列是任务间数据交换的常用手段,队列是生产者消费者模型的重要组成部分.FreeRTOS的队列简单易用,下面结合一个具体例子说明FreeRTOS中的队列如何使用. 2.参考代 ...

  8. jquery ajaxform上传文件返回不提示信息的问题

    在使用jquery的ajaxform插件进行ajax提交表单并且上传文件的时候,返回类型datatype :json但是后台通过写出一个json对象后,在执行完以后没有进入success函数,而是直接 ...

  9. 从 Kubernetes 谈容器网络

    基本概念 在 Kubernetes 中.资源从管理粒度上分为三级:容器.Pod.Service. 容器 即 Docker 或者 Rocket 容器(1.0 中仅支持这两种容器). 容器是最低粒度的资源 ...

  10. 《Android开发艺术探索》读书笔记 (7) 第7章 Android动画深入分析

    本节和<Android群英传>中的第七章Android动画机制与使用技巧有关系,建议先阅读该章的总结 第7章 Android动画深入分析 7.1 View动画 (1)android动画分为 ...