本文实例为大家分享了用jquery实现轮播图的具体代码，供大家参考，具体内容如下
（带小圆点和左右箭头切换效果的）
原理：定义索引，定时任务实现轮播切换，切换时同样需要切换小圆点的样式
var j = 0;//定义索引，图片和小圆点共用
var cusTimer;//定义定时函数
$('.cons-middle .cons-mid').eq(0).show().siblings().hide();//定义默认的显示图片，也就是索引为0的那张图片
cusStart();//开始实现图片轮播，用到了定时器
$('.luobo-circle li').hover(function(){//当鼠标运动到某个小圆点是，切换图片
clearInterval(cusTimer);//并且清除定时
j=$(this).index();//获取当前鼠标运动到的小圆点的索引
cusChange();//执行切换图片的函数
});
$('.luobo-circle li').mouseleave(function(){
cusStart();//定义当鼠标离开小圆点时继续执行定时函数，轮播开始
});
$('.cons-left img').click(() => {
j--;
if (j < 0) {
j = 3;
};
cusChange();
$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
$('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
});
$('.cons-right img').click(() => {
j ;
if (j > 3) {
j = 0;
}
cusChange();
$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
$('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
})
function cusStart(){//轮播开始函数
cusTimer = setInterval(function(){//自动轮播定时函数
j ;//索引进行累加，防止图片只显示一张
if(j==4){
j=0;//我这里是用的8张图片，当索引为8时，图片没有了，将索引清零
}
cusChange();//继续执行图片轮播
},5000)//2000是多久切换一次图片，表示两秒
};
function cusChange(){//图片显示函数，这里的fadeOut和fadeIn是图片显示方式是淡入淡出
$('.cons-middle .cons-mid').eq(j).fadeIn(300).siblings().stop().fadeOut(300);
//eq选择当前图片，siblings表示排除其他图片，stop表示其他图片停止切换，只切换当前图片
$('.luobo-circle li').eq(j).css('background-color','#4C80E7')
$('.luobo-circle li').eq(j).siblings().css('background-color','#B5C9F3');
}
（无小圆点，仅自动轮播及左右切换）
//首页banner轮播
var i = 0;
var bannerTimer;
function bannerChange(){//图片显示函数，这里的fadeOut和fadeIn是图片显示方式是淡入淡出
$('.banner ul li').eq(i).fadeIn(300).siblings().stop().fadeOut(300);
}
function bannerStart(){//轮播开始函数
bannerTimer = setInterval(function(){//自动轮播定时函数
i ;
if(i==2){
i=0;
}
bannerChange();
},3000)
};
$('.banner ul li').eq(0).show().siblings().hide();
bannerStart();
$('.pagination .prev').click(() => {
i--;
if (i < 0) {
i = 2;
};
bannerChange();
});
$('.pagination .next').click(() => {
i ;
if (i > 2) {
i = 0;
}
bannerChange();
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。