jq写一个图片加文字上下无缝滚动,鼠标移入停止,移出开始
时间: 2024-03-20 22:38:33 浏览: 65
你可以在上一个问题中的代码基础上,使用jQuery的`mouseenter`和`mouseleave`事件来实现鼠标移入停止、移出开始的效果。代码如下:
```
var container = $('#scroll-container');
var items = container.find('.scroll-item');
var itemHeight = items.eq(0).outerHeight();
var currentIndex = 0;
var timer = null;
function startScroll() {
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);
}
startScroll();
container.on('mouseenter', function() {
clearInterval(timer);
});
container.on('mouseleave', function() {
startScroll();
});
```
以上代码实现了鼠标移入停止、移出开始的效果,当鼠标移入容器时,清除定时器停止滚动;当鼠标移出容器时,重新启动定时器开始滚动。
阅读全文