<!DOCTYPE html>
<html>
<head>
<title>jQuery轮播图示例</title>
<style>
.slider {
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: 100%;
}
.slider .slides {
width: 500%;
height: 100%;
display: flex;
}
.slider .slide {
width: 20%;
transition: all 0.5s;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<div class="slide"><img src="img/1.jpeg" alt="Image 1"></div>
<div class="slide"><img src="img/2.jpeg" alt="Image 2"></div>
<div class="slide"><img src="img/3.jpeg" alt="Image 3"></div>
<div class="slide"><img src="img/4.jpeg" alt="Image 4"></div>
<div class="slide"><img src="img/5.jpeg" alt="Image 5"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var slideCount = $('.slide').length;
var slideWidth = $('.slider').width();
var slideIndex = 0;
$('.slides').css('width', slideCount * slideWidth);
function nextSlide() {
if (slideIndex < slideCount - 1) {
slideIndex++;
} else {
slideIndex = 0;
}
$('.slides').animate({'margin-left': -slideIndex * slideWidth});
}
setInterval(nextSlide, 3000);
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
