jquery纵向轮播图
时间: 2023-12-18 08:28:40 浏览: 76
以下是一个简单的jQuery纵向轮播图的实现方法:
HTML代码:
```html
<div class="slider">
<ul class="slider-list">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
</div>
```
CSS代码:
```css
.slider {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider-list {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
.slider-list li {
width: 400px;
height: 300px;
float: left;
}
```
JavaScript代码:
```javascript
$(function() {
var slider = $('.slider');
var sliderList = slider.find('.slider-list');
var sliderItem = sliderList.find('li');
var sliderCount = sliderItem.length;
var sliderWidth = slider.width();
var sliderHeight = slider.height();
var currentIndex = 0;
var intervalId;
// 设置轮播图容器和轮播项的宽高
slider.css({
width: sliderWidth,
height: sliderHeight
});
sliderItem.css({
width: sliderWidth,
height: sliderHeight
});
// 开始轮播
function startSlider() {
intervalId = setInterval(function() {
var nextIndex = (currentIndex + 1) % sliderCount;
sliderList.animate({
top: -nextIndex * sliderHeight
}, 500);
currentIndex = nextIndex;
}, 2000);
}
// 停止轮播
function stopSlider() {
clearInterval(intervalId);
}
// 鼠标悬停在轮播图上时停止轮播,离开时继续轮播
slider.hover(stopSlider, startSlider);
// 开始轮播
startSlider();
});
```