欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用Javascript简单实现图片无缝滚动_javascript技巧

程序员文章站 2022-05-03 20:34:02
...
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。

主要的是使用js位置知识。

1.innerHTML:设置或获取元素的html标签

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距

3.offsetWidth:设置或获取指定标签的宽度

4.setInterval():设置方法定时启动

5.clearInterval();清除定时器

效果图:

使用Javascript简单实现图片无缝滚动_javascript技巧

先睹为快:demo

复制代码 代码如下:





javascript scroll制作




图片滚动制作








  • 使用Javascript简单实现图片无缝滚动_javascript技巧

  • 使用Javascript简单实现图片无缝滚动_javascript技巧

  • 使用Javascript简单实现图片无缝滚动_javascript技巧

  • 使用Javascript简单实现图片无缝滚动_javascript技巧












很简洁实用的代码,小伙伴们根据自己的项目需求,适当美化下即可。