JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)
本文我们实现纯JS方式的滚动广告效果。
先show一下成品:
首先是网页样式:
1. #demo {
2. background: #FFF;
3. overflow:hidden;
4. border: 1px dashed #CCC;
5. width: 1280px;
6. height:200px;
7. }
8. #demo img {
9. border: 3px solid #F2F2F2;
10. }
11. #indemo {
12. float: left;
13. width: 800%;
14. }
15. #demo1 {
16. float: left;
17. }
18. #demo2 {
19. float: left;
20. }
布局如下:
1. <div id="demo">
2. <div id="indemo">
3. <div id="demo1">
4. <a href="#"><img src="banner.jpg" border="0" /></a>
5. <a href="#"><img src="banner2.jpg" border="0" /></a>
6. </div>
7. <div id="demo2"></div>
8. </div>
9. </div>
具体的JS实现:
1. <script>
2. var speed=10;
3. var tab=document.getElementById("demo");
4. var tab1=document.getElementById("demo1");
5. var tab2=document.getElementById("demo2");
6. tab2.innerHTML=tab1.innerHTML;
7. function Marquee(){
8. if(tab2.offsetWidth-tab.scrollLeft==0)
9. tab.scrollLeft-=tab1.offsetWidth
10. else{
11. tab.scrollLeft++;
12. }
13. }
14. var MyMar=setInterval(Marquee,speed);
15. tab.onmouseover=function() {clearInterval(MyMar)};
16. tab.onmouseout=function() {MyMar=setInterval
17. (Marquee,speed)};
18. </script>
这里要注意的是:
scrollLeft代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度。
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
明白了这个具体的实现就好理解了。
实现的原理是这样的:首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来,这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动,实现影藏。其中有一点需要注意的是,由于这里是将两张图片同时放入左侧,当右侧显示了一半时会将左侧影藏的完全显示出来,又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。
这样平滑的滚动就实现了。
谢谢支持!
可以联系我进行交流。Renhanlinbsl@163.com
2016.2.5
4:55
JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)的更多相关文章
- 【原创】ListView快速滚动至新添加一行(自动滚动)
在C#开发中我们经常要开发一些日志系统,尤其是基于ListView的日志显示系统.但是当日志增多是你是否有一些困扰,就是它为什么不会自动滚动至最后一行. 以下是一小段代码,希望可以帮助你. publi ...
- Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果
如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下 ...
- PDF如何自动滚动阅读
PDF如何自动滚动阅读 视图---页面显示---自动滚动 快捷键 Ctrl +shift+H
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
- 今天代码中接触到了一个新的东西。js的上下自动滚动,无缝对接。
js的上下自动滚动,无缝对接.为什么会用到这个东西呢?因为我在做公司的官网项目的修改的时候.有一个产品介绍的页面,会有很多的产品出现在,中间部分的列表里.但是又不能够使用分页.所以我就在想如果,列表数 ...
- jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)
最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...
- wordpress使用video.js与七牛云存储实现无广告视频分享应用
video.js是一款极受欢迎的基于HTML5的开源WEB视频播放器,其充分利用了HTML5的视频支持特性,可以实现全平台的无视频插件播放功能,对于现在流行的手机.PAD等移动智能终端有极佳的应用体验 ...
- js 图片无缝循环
<html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> ...
随机推荐
- <数据结构与算法分析>读书笔记--最大子序列和问题的求解
现在我们将要叙述四个算法来求解早先提出的最大子序列和问题. 第一个算法,它只是穷举式地尝试所有的可能.for循环中的循环变量反映了Java中数组从0开始而不是从1开始这样一个事实.还有,本算法并不计算 ...
- mac版本idea使用(二)-如何安装PlantUML画时序图、类图
在跟踪spring源码的时候,看见网上的博客好多使用了idea自带的展示类继承关系图的功能,这个地方使用了idea的diagrams-show diagram,就可以显示类的继承图,很神奇的样子,记录 ...
- [转]QDir类及其用法总结
直接给出原文链接:QDir类及其用法总结
- PAT A1015 Reversible Primes (20 分)——进制转换,质数
A reversible prime in any number system is a prime whose "reverse" in that number system i ...
- 排列数与For的关系
目录 什么是排列数 用现实模型表示 用Python编程表示 用数学符号表示 规律 规律1 规律2 如果m < n 会怎样? 排列数的应用场景 什么是排列数 排列指将一个集合里的每个元素不重复的排 ...
- linux 基础 用户操作
命令: 1. whoami 2.su 用户名 3.useradd 用户名 4.passwd 用户名
- node 文件操作
对文件的各种操作,使用姿势如下 文件操作单例 @example fu.exist(file); //是否存在 fu.copy(file, 'new-path'); //复制到某个新目录 fu.move ...
- BZOJ4883 棋盘上的守卫 基环树、Kruskal
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4883 题意:给出一个$N \times M$的棋盘,每个格子有权值.你需要每一行选中一 ...
- Bootstrap Modal 使用remote从远程加载内容
Bootstrap的Modal这个模态窗组件还是很好用的,但在开发的过程中模态窗中的内容大部分都是从后端加载的.要实现模态窗的内容是从后端加载话,常用的实现方式有2种.它们是: (1) ...
- springboot启动后总是自己shutdown
现象 这几天一直被一个问题困扰,每次springboot的tomcat启动之后, 然后过了一段时间看, 进程就突然自己关闭掉了. 然后日志是: ationConfigEmbeddedWebApplic ...