用jQuery实现轮播图效果(自动播放,能手动切换)
时间: 2024-03-27 22:37:06 浏览: 24
好的,以下是一个简单的用 jQuery 实现轮播图效果的示例代码:
HTML 代码:
```
<div class="slider">
<div class="slider-wrapper">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<a class="prev" href="#">上一个</a>
<a class="next" href="#">下一个</a>
</div>
```
CSS 代码:
```
.slider {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
position: absolute;
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}
.slider-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #fff;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.3);
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.2s ease-in-out;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
```
JavaScript 代码:
```
$(document).ready(function() {
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = $(".slider-wrapper img");
var dots = $(".dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides.eq(i).css("transform", "translateX(-" + (slideIndex - 1) * 100 + "%)");
}
for (i = 0; i < dots.length; i++) {
dots.eq(i).removeClass("active");
}
dots.eq(slideIndex - 1).addClass("active");
}
$(".prev").click(function() {
plusSlides(-1);
});
$(".next").click(function() {
plusSlides(1);
});
$(".dot").click(function() {
currentSlide($(this).index() + 1);
});
setInterval(function() {
plusSlides(1);
}, 5000);
});
```
这段代码首先定义了一个 `slideIndex` 变量用来记录当前显示的轮播图的索引,然后定义了三个函数 `plusSlides`、`currentSlide` 和 `showSlides`,分别用来切换轮播图、跳转到指定轮播图和展示当前轮播图。接下来通过 jQuery 选择器和事件绑定方法来实现手动切换轮播图的功能,最后使用 `setInterval` 函数来实现自动播放的功能。