jQuery带控制按钮轮播图插件


Posted in jQuery onJuly 31, 2020

带控制按钮(点击移动到指定图片)的jQuery轮播图插件

效果图

当点击下方按钮时,轮播动画会停止,按钮所对应的图片在规定时间范围内移动出现,这一动作结束后再从当前图片开始继续轮播动画

jQuery带控制按钮轮播图插件

$.fn.slider = function(){
 
  //轮播图变量
  var $ul =this; //在jQuery原型方法中,this就指的调用该方法的jQuery对象
  var $lis = $ul.children();//返回所有的直接子标签
  var imgwidth = $lis.width();
  //设置列表的宽度
  $ul.width(imgwidth*$lis.size());//size获取元素的个数
  //获取所有的方块按钮
  var $buttons = $('.nav li');
  console.log($buttons)
  console.log($lis.size())
  //设置下标
  var index =0;//当前图片和按钮下标
  var timer = -1;//用于保存定时器id,方便停止


  //调用延时定时器
  timer= setTimeout(move,2000);//间隔2s移动一次图片
  //处理图片列表移动,以及使用延时定时器来模拟间隔定时器
  function move(){
   //获取ul当前的margin-left
  var left =parseInt( $ul.css('margin-left'));
  //当ul列表移动到最后一张时,直接设置margin-left=0px,否则继续移动
  if(left>(-1)*(imgwidth*($lis.size()-1))){
   $ul.animate({'margin-left':`-=${imgwidth}px`},1500);
   index++;//当前下标加1
   }else{
   $ul.css('margin-left','0px');
   index=0;//下标为0
   }
   //根据index来设置按钮样式
   //如果是最后一张,那么提前回到第一张
   if(index <$buttons.size()){
   $buttons.eq(index).addClass('active').siblings().removeClass('active');
   }else{
   $buttons.eq(0).addClass('active').siblings().removeClass('active');
   }
  timer = setTimeout(move,2000);
  }  
  // 点击按钮
  $buttons.click(function(){
   //$(this) 访问当前被点击的按钮
   var i = $(this).index();//获取被点击按钮的下标
   if(i==index){
   return;//提前终止
   }
   //停止未执行的定时器
   if(timer!=-1){
   clearTimeout(timer);
   }  
   //移动之前把未执行的动画暂停掉
   $ul.stop(); 
   //移动
   $ul.animate({'margin-left':`-${i*imgwidth}px`},1500,function(){
   timer = setTimeout(move,2000);
   });
   //移动之后改变按钮状态
   $buttons.eq(i).addClass('active').siblings().removeClass('active');
   // 更新当前图片下标
   index=i;
   
  });
}

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery Form轻松实现文件上传
May 24 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jquery实现简单自动轮播图效果
Jul 29 #jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
jquery实现简单拖拽效果
Jul 20 #jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
使用python实现knn算法
2017/12/20 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
对Python _取log的几种方式小结
2019/07/25 Python
基于python实现学生信息管理系统
2019/11/22 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
小区物业门卫岗位职责
2014/04/10 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
学习委员竞选稿
2015/11/20 职场文书
用Python提取PDF表格的方法
2021/04/11 Python