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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现抽奖功能
Oct 22 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 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP7新功能总结
2019/04/14 PHP
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
小程序实现搜索框
2020/06/19 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
django+echart数据动态显示的例子
2019/08/12 Python
python构造函数init实例方法解析
2020/01/19 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
个人工作表现自我评价
2015/03/06 职场文书
网络销售员岗位职责
2015/04/11 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
css3 文字断裂效果
2022/04/22 HTML / CSS