1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>无标题文档</title>
  5. <style type="text/css">
  6.     *{margin: 0;padding: 0;}
  7.     #div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;}
  8.     #div1 ul{position: absolute;left: 0;top: 0;}
  9.     #div1 ul li {float: left;width:100px;height: 100px; list-style:none;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <a href="javascript:;">向左走</a>
  15. <a href="javascript:;">向右走</a>
  16. <a href="javascript:;">中速</a>
  17. <a href="javascript:;">高速</a>
  18. <div id="div1">
  19. <ul>
  20.     <li><img src="01.jpg" /></li>
  21.     <li><img src="02.jpg" /></li>
  22.     <li><img src="03.jpg" /></li>
  23.     <li><img src="04.jpg" /></li>
  24. </ul>
  25. </div>
  26. <script type="text/javascript">
  27.     var odiv=document.getElementById('div1');
  28.     var oul=odiv.getElementsByTagName('ul')[0];
  29.     var oli=oul.getElementsByTagName('li');
  30.     var speed=-2;
  31.     oul.innerHTML=oul.innerHTML+oul.innerHTML;
  32.     oul.style.width=oli[0].offsetWidth*oli.length+'px';
  33.     function move(){
  34.         if(oul.offsetLeft<-oul.offsetWidth/2)
  35.             {
  36.                 oul.style.left='0';
  37.             }
  38.         if(oul.offsetLeft>0)
  39.             {
  40.                 oul.style.left=-oul.offsetWidth/2+'px';
  41.             }
  42.         oul.style.left=oul.offsetLeft+speed+'px';
  43.     }
  44.     var timer=setInterval(move,30);
  45.     odiv.onmouseover=function()
  46.     {
  47.         clearInterval(timer);
  48.     }
  49.     odiv.onmouseout=function()
  50.     {
  51.         timer=setInterval(move,30);
  52.     }
  53.     document.getElementsByTagName('a')[0].onclick=function()
  54.     {
  55.         speed=-2;
  56.     }
  57.     document.getElementsByTagName('a')[1].onclick=function()
  58.     {
  59.         speed=+2;
  60.     }
  61.         document.getElementsByTagName('a')[2].onclick=function()
  62.     {
  63.         speed=-1;
  64.     }
  65.         document.getElementsByTagName('a')[3].onclick=function()
  66.     {
  67.         speed=-4;
  68.     }
  69. </script>
  70. </body>
  71. </html>

附件下载

利用JavaScript做无缝滚动的更多相关文章

  1. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  2. webbrowser内容滚动（javascript内容无缝滚动）

    一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...

  3. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  4. Javascript图片无缝滚动

    http://www.cnblogs.com/shouce/p/5068787.html

  5. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  6. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  7. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

  8. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. Javascript做图片无缝平滑滚动

    因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. python tips:类的专有属性

    实例通常能够调用类的属性,但是有些属性是类专有的,实例无法调用. 实例调用方法时查找属性时,首先在自己的__dict__中找,找不到去类中找,在类中能够找到的属性都位于dir(cls)中,如果类的某些 ...

  2. gitlab变更邮箱后发送邮件报SSLError错误

    测试发送邮件: gitlab-rails console Notify.test_email('test666@example.com', 'Message Subject', 'Message Bo ...

  3. BZOJ 4712: 洪水 挖坑待补

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  4. S-HR薪酬项目与核算表的关系

  5. [置顶] 我的 Java 后端书架 (2016 年暖冬版)

    转自:  http://calvin1978.blogcn.com/articles/bookshelf16.html 我的 Java 后端书架 (2016 年暖冬版) 本书架主要针对 Java 后端 ...

  6. html第五节课

    格式布局 一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolu ...

  7. 渗透实战（周三）：Ettercap·ARP毒化&MITM中间人攻击

    今天,我们来讲解如何对小型Wi-Fi局域网发动网络攻击

  8. Luogu P1198 BZOJ 1012 最大数 (线段树)

    手动博客搬家: 本文发表于20170821 14:32:05, 原地址https://blog.csdn.net/suncongbo/article/details/77449455 URL: (Lu ...

  9. 【ZOJ 4070】Function and Function

    [链接] 我是链接,点我呀:) [题意] [题解] 递归一会. 会发现最后肯定是0,1一直循环. 开始循环之后就直接返回结果就好. [代码] #include <bits/stdc++.h> ...

  10. Selenium Webdriver——操作隐藏的元素display属性

    有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操作这个下拉框, ...