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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。