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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 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
php获取数组中重复数据的两种方法
2013/06/28 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
如何基于JS截获动态代码
2019/12/25 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python如何获取系统iops示例代码
2016/09/06 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
经典的班主任推荐信
2013/10/28 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
广播体操口号
2014/06/18 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
租车协议书范本2014
2014/11/17 职场文书
2015年公司新年寄语
2014/12/08 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
bose降噪耳机音能消除人声吗
2022/04/19 数码科技