带控制按钮（点击移动到指定图片）的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;



});
}
$.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图片轮播JavaScript图片轮播Bootstrap图片轮播以上就是本文的全部内容，希望对大家的学习有所帮助。