本文实例为大家分享了用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(); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- jquery 实现轮播图详解及实例代码
- 利用jquery写的左右轮播图特效
- jquery实现左右无缝轮播图
- jQuery实现轮播图及其原理详解
- jQuery插件slides实现无缝轮播图特效
- jquery实现左右滑动式轮播图
- jQuery自适应轮播图插件Swiper用法示例
- JQuery和html+css实现带小圆点和左右按钮的轮播图实例
- jquery实现的简单轮播图功能【适合新手】
- 基于jQuery实现淡入淡出效果轮播图
本文由 华域联盟 原创撰写:华域联盟 » 用jquery实现轮播图效果
转载请保留出处和原文链接:https://www.cnhackhy.com/79428.htm