jquery 淡入淡出轮播图

最新推荐文章于 2021-06-08 16:50:48 发布

置顶吃腥的鱼

最新推荐文章于 2021-06-08 16:50:48 发布

阅读量263

点赞数

本文介绍了一种使用HTML、CSS及JavaScript实现的轮播图自动切换效果，包括图片的淡入淡出、左右切换按钮及焦点切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 代码：

</div>

css：可以自已写下。

var timer; // 时间
var i = 0; //当前图片
var siZe = $('.slideBox a').size() //总共图片个数
var timer = setInterval(Move, 3000) // 开启定时器
var li=$('.slide-point li').length;
console.log(li)
$('.slideBox a').eq(0).show() // 第1个显示
//自动
function Move() {
i++
if(i == siZe) {
i = 0
}
$('.slide-point li').eq(i).addClass('li').siblings().removeClass('li');
$('.slideBox a').eq(i).fadeIn().siblings().fadeOut();
};
// 显示/隐藏
$('.slideBox').hover(function() {
clearInterval(timer);
$('.btn').show();
}, function() {
timer = setInterval(Move, 3000)
});
//向左
$('.left').click(function() {
i--
if(i == -1) {
i = siZe - 1;
}
$('.slide-point li').eq(i).addClass('li').siblings().removeClass('li');
$('.slideBox a').eq(i).fadeIn().siblings().fadeOut();
});
//向右
$('.right').click(function() {
Move()
})
// 焦点切换

$('.slide-point li').click(function(){
var num=$(this).index()
$(this).addClass('li').siblings().removeClass('li');
$('.slideBox a').eq(num).fadeIn().siblings().fadeOut()
})