关于使用setInterval()函数制作滚动越来越快的问题

1.setInterval(定时调用函数方法)
1.1关于点击查询之后滚动速度越来越快的问题:
分析原因:
1.滚动出现越来越快,首先想到可能是每次查询之后,在原有的基础上调用时间变了,在网页上跟了下之后发现并没有。(第一种想法没发现问题)
2.然后在js代码查看,发现可能是调用setInterval函数的时候在原有的基础上调用了(比如:定义的函数是60毫秒调用一次,在此基础上再60毫秒调用一次就会出现滚动速度越快的问题)
解决办法:
这个为定义的setInterval()函数:把MyMar定义为一个全局变量,


然后在每次调用setInterval(),之前 先清除之前调用了的setInterval();
清除方法clearInterval("定义的变量名(也是setInterval(所返回来的数值))");




好的,以下是一个简单的jQuery实现图片滚动栏的示例代码: HTML部分: ```html <div class="scroll-container"> <div class="scroll-wrapper"> <img src="image1.jpg" alt="image1"> <img src="image2.jpg" alt="image2"> <img src="image3.jpg" alt="image3"> <img src="image4.jpg" alt="image4"> <img src="image5.jpg" alt="image5"> </div> </div> ``` CSS部分: ```css .scroll-container { width: 500px; height: 200px; overflow: hidden; } .scroll-wrapper { width: 1000px; height: 200px; position: relative; left: 0; transition: left 0.5s ease-in-out; } .scroll-wrapper img { width: 200px; height: 200px; float: left; } ``` jQuery部分: ```javascript $(function() { var containerWidth = $('.scroll-container').width(); var wrapperWidth = $('.scroll-wrapper').width(); var currentPosition = 0; var scrollInterval; function startScroll() { scrollInterval = setInterval(function() { currentPosition -= 200; if (currentPosition < -(wrapperWidth - containerWidth)) { currentPosition = 0; } $('.scroll-wrapper').css('left', currentPosition); }, 2000); } function stopScroll() { clearInterval(scrollInterval); } $('.scroll-container').hover(stopScroll, startScroll); startScroll(); }); ``` 解释一下代码: 首先,在HTML中,我们创建了一个包含图片的div容器,其中包含一个具有所有图片的div容器。 接下来,在CSS中,我们设置了两个div容器的样式。scroll-container是一个固定高度和宽度的容器,其中包含了一个具有绝对定位的scroll-wrapper容器,该容器包含了所有的图片。 接着,在jQuery中,我们首先获取了scroll-container和scroll-wrapper的宽度,然后定义了一个当前位置的变量,该变量用于跟踪scroll-wrapper的位置。 然后我们定义了两个函数:startScroll函数和stopScroll函数。startScroll函数将在页面加载时自动调用,它通过使用setInterval函数滚动图片。stopScroll函数用于在鼠标悬停在scroll-container上时停止滚动。 最后,我们使用jQuery的hover函数来触发stopScroll和startScroll函数,并在页面加载时调用startScroll函数来开始滚动图片。 希望这个示例能够帮助你了解如何使用jQuery制作图片滚动栏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值