jq写一个图片加文字上下无缝滚动
时间: 2024-03-19 20:46:32 浏览: 25
你可以通过以下代码实现使用jQuery实现图片加文字上下无缝滚动的效果:
HTML代码:
```
<div id="scroll-container">
<div class="scroll-item">
<img src="image1.jpg">
<div class="text">图片1</div>
</div>
<div class="scroll-item">
<img src="image2.jpg">
<div class="text">图片2</div>
</div>
<div class="scroll-item">
<img src="image3.jpg">
<div class="text">图片3</div>
</div>
</div>
```
CSS代码:
```
#scroll-container {
height: 200px;
overflow: hidden;
}
.scroll-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.scroll-item img {
width: 100px;
height: 100px;
margin-right: 20px;
}
.scroll-item .text {
font-size: 16px;
}
```
JS代码:
```
var container = $('#scroll-container');
var items = container.find('.scroll-item');
var itemHeight = items.eq(0).outerHeight();
var currentIndex = 0;
var timer = setInterval(function() {
var clone = items.eq(currentIndex).clone();
container.append(clone);
container.animate({scrollTop: '+=' + itemHeight}, 500, function() {
clone.remove();
currentIndex++;
if (currentIndex >= items.length) {
currentIndex = 0;
}
});
}, 3000);
```
以上代码实现了每隔3秒钟滚动一个图片和文字项,并在滚动到最后一项时实现无缝循环滚动的效果。你可以根据自己的需求进行修改和优化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)