滚动定时器,鼠标滑入暂停滚动,滑出继续滚动

定义滑入滑出事件

let $listUl = $('.bigDivBottom .listUl') // 设置overflow-y的dom
$listUl.hover(function(){
    clearInterval(that.leftTopTimer)
},
function () {
     that.leftTopTimer = setInterval(() => {
        that.scrolllist()
     }, 4000)
}).trigger('mouseleave')

Vue销毁时别忘了销毁定时事件

beforeDestroy () {
     clearInterval(this.leftTopTimer)
     this.leftTopTimer = null
 },

滚动事件

scrolllist () {
    var scrollHeight = $('.listLi:first').height() + 20;
    let $listUl = $('.bigDivBottom .listUl') // 设置overflow-y的dom
    $listUl.stop(true).animate({scrollTop:scrollHeight + $listUl.scrollTop()}, "slow"); // 一次滚动一个卡片+20的高度
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的实现方法: HTML部分: ```html <div class="scroll-images"> <img src="image1.jpg" alt=""> <img src="image2.jpg" alt=""> <img src="image3.jpg" alt=""> <img src="image4.jpg" alt=""> <img src="image5.jpg" alt=""> </div> ``` CSS部分: ```css .scroll-images { width: 500px; height: 300px; overflow: hidden; position: relative; } .scroll-images img { display: block; float: left; width: 100px; height: 100%; margin-right: 10px; } ``` JavaScript部分: ```js var scrollTimer; var scrollIndex = 0; var scrollImages = document.querySelector('.scroll-images'); var images = scrollImages.querySelectorAll('img'); scrollTimer = setInterval(function() { scrollIndex++; if (scrollIndex >= images.length) { scrollIndex = 0; } scrollImages.scrollLeft = scrollIndex * (images[0].offsetWidth + 10); }, 2000); scrollImages.addEventListener('mouseenter', function() { clearInterval(scrollTimer); }); scrollImages.addEventListener('mouseleave', function() { scrollTimer = setInterval(function() { scrollIndex++; if (scrollIndex >= images.length) { scrollIndex = 0; } scrollImages.scrollLeft = scrollIndex * (images[0].offsetWidth + 10); }, 2000); }); ``` 代码解释: 首先,我们使用 `setInterval` 定时器来实现图片的滚动效果。在每次定时器触发,我们将滚动的索引加一,然后设置容器的 `scrollLeft` 属性来让容器滚动到对应的位置。当滚动到最后一张图片,我们将滚动的索引重置为零,从头开始滚动。 然后,我们添加了鼠标进入和离开容器的事件监听器。当鼠标进入容器,我们调用 `clearInterval` 函数来停止定时器,从而暂停图片的滚动。当鼠标离开容器,我们重新启动定时器继续图片的滚动。 最后,我们需要注意的是,在 CSS 中,我们将容器的 `overflow` 属性设置为 `hidden`,这样可以隐藏多余的图片,只显示容器的宽度范围内的图片,从而实现滚动的效果。而在 JavaScript 中,我们使用 `offsetWidth` 属性来获取图片的宽度,并且加上一个固定的值(这里是 10 像素),来计算滚动的距离。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值