Jquery最简单的轮播图
时间: 2023-06-04 15:03:05 浏览: 54
Jquery最简单的轮播图可以通过以下代码实现:
HTML代码:
```html
<div class="carousel">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
</div>
```
CSS代码:
```css
.carousel {
position: relative;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
```
JavaScript/JQuery代码:
```javascript
$(document).ready(function() {
var interval = 3000;
var imgs = $('.carousel img');
var max = imgs.length - 1;
var i = 0;
setInterval(function() {
imgs.removeClass('active');
imgs.eq(i).addClass('active');
i = i === max ? 0 : i + 1;
}, interval);
});
```
这段代码会以每3秒钟的时间轮播图片,使用JQuery实现。如果需要改变轮播时间,可以修改interval变量的值,单位为毫秒。