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();
});
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。