JavaScript基于定时器实现图片无缝滚动功能的方法-创新互联

这篇文章主要介绍了JavaScript基于定时器实现图片无缝滚动功能的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

10年专注成都网站制作,成都企业网站定制,个人网站制作服务,为大家分享网站制作知识、方案,网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都企业网站定制,高端网页制作,对社区文化墙等多个领域,拥有多年的营销推广经验。

具体如下:

一、无缝滚动理论基础

基础知识

1.setInterval(function,time)、clearInterval(timer)

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

2.offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,

这同offsetLeft是相同的,区别在于:

1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。
2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果定义在css里,style.left的值仍然 为空,这就是我刚开始碰到的问题,总是取不到style.left的值。

offsetLeft则仍然能够取到,无需事先定义div的位置。

二、代码片段




  
  无缝滚动
  
  



  
  
       
          
  •       
  •       
  •       
  •     
  

三、效果图

 JavaScript基于定时器实现图片无缝滚动功能的方法

感谢你能够认真阅读完这篇文章,希望小编分享的“JavaScript基于定时器实现图片无缝滚动功能的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享名称:JavaScript基于定时器实现图片无缝滚动功能的方法-创新互联
本文链接:http://azwzsj.com/article/dgjsoj.html

其他资讯