前端JS特效第29集：jQuery仿途牛多样式图片轮播代码
以下是一个使用jQuery实现的图片轮播器的简化示例代码，模仿了路牛多样式轮播的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路牛轮播器</title>
<style>
.carousel {
position: relative;
width: 600px;
height: 300px;
margin: auto;
}
.carousel-inner {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-inner">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- 更多图片 -->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let currentIndex = 0;
const images = $('.carousel-inner img');
const imageCount = images.length;
setInterval(function() {
images.eq(currentIndex).fadeOut(1000);
currentIndex = (currentIndex + 1) % imageCount;
images.eq(currentIndex).fadeIn(1000);
}, 3000);
});
</script>
</body>
</html>这段代码使用jQuery实现了图片的自动轮播效果，每隔3秒切换到下一张图片。轮播中的图片通过CSS进行样式设置，并通过jQuery的fadeIn()和fadeOut()方法实现淡入淡出效果。轮播的索引通过currentIndex变量管理，并且使用% imageCount确保在最后一张图片之后继续从第一张图片开始轮播。
评论已关闭