jquery淡入淡出轮播图
时间: 2023-07-05 12:27:00 浏览: 61
好的,下面是一个简单的 jQuery 淡入淡出轮播图的代码示例:
HTML 代码:
```html
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
CSS 代码:
```css
.slider {
position: relative;
height: 500px;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease;
}
.slider img.active {
opacity: 1;
}
```
jQuery 代码:
```javascript
$(function() {
var slider = $('.slider');
var slides = slider.find('img');
var slideCount = slides.length;
var currentIndex = 0;
function showSlide(index) {
slides.removeClass('active');
slides.eq(index).addClass('active');
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
showSlide(currentIndex);
}
setInterval(nextSlide, 3000);
});
```
这段代码会每隔 3 秒自动切换图片,切换时会使用淡入淡出的效果。你可以替换 HTML 代码中的图片链接来展示自己的图片。