用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();
});

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

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com