用jquery实现轮播图效果用jquery实现轮播图效果

【用jquery实现轮播图效果】本文实例为大家分享了用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(); });

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