jq循环轮番显示隐藏,纵向滚动,并且附上完整代码
时间: 2023-08-05 09:25:31 浏览: 57
可以使用jQuery来实现循环轮番显示隐藏和纵向滚动,以下是一个简单的示例代码:
HTML代码:
```html
<div class="container">
<div class="item active">第1个内容</div>
<div class="item">第2个内容</div>
<div class="item">第3个内容</div>
<div class="item">第4个内容</div>
<div class="item">第5个内容</div>
</div>
```
CSS代码:
```css
.container {
height: 150px;
overflow: hidden;
}
.item {
height: 30px;
display: none;
}
.active {
display: block;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
var items = $('.item');
var currentIndex = 0;
var itemHeight = items.outerHeight();
var containerHeight = $('.container').height();
var maxIndex = items.length - 1;
function loop() {
var currentItem = items.eq(currentIndex);
currentItem.addClass('active').siblings().removeClass('active');
$('.container').animate({
scrollTop: currentIndex * itemHeight
}, 500);
currentIndex = (currentIndex == maxIndex) ? 0 : (currentIndex + 1);
}
setInterval(loop, 2000);
});
```
这段代码实现了每隔2秒钟循环轮番显示隐藏内容,并且内容纵向滚动。你可以根据自己的需要进行修改和优化。