非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的应用。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>图片滚动</title>
  6. </head>
  7. <body>
  8. <style type="text/css">
  9. <!--
  10. #demo {
  11. background: #FFF;
  12. overflow:hidden;
  13. border: 1px dashed #CCC;
  14. width: 500px;
  15. }
  16. #demo img {
  17. border: 3px solid #F2F2F2;
  18. }
  19. #indemo {
  20. float: left;
  21. width: 800%;
  22. }
  23. #demo1 {
  24. float: left;
  25. }
  26. #demo2 {
  27. float: left;
  28. }
  29. -->
  30. </style>
  31. <div id="demo">
  32. <div id="indemo">
  33. <div id="demo1">
  34. <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
  35. <a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
  36. <a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
  37. <a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
  38. <a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
  39. <a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
  40. </div>
  41. <div id="demo2"></div>
  42. </div>
  43. </div>
  44. <script>
  45. <!--
  46. var speed=10;
  47. var tab=document.getElementById("demo");
  48. var tab1=document.getElementById("demo1");
  49. var tab2=document.getElementById("demo2");
  50. tab2.innerHTML=tab1.innerHTML;
  51. function Marquee(){
  52. if(tab2.offsetWidth-tab.scrollLeft<=0)
  53. tab.scrollLeft-=tab1.offsetWidth
  54. else{
  55. tab.scrollLeft++;
  56. }
  57. }
  58. var MyMar=setInterval(Marquee,speed);
  59. tab.onmouseover=function() {clearInterval(MyMar)};
  60. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  61. -->
  62. </script>
  63. </body>
  64. </html>

JS图片滚动代码（无缝、平滑）的更多相关文章

  1. 常用JS图片滚动（无缝、平滑、上下左右滚动）

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...

  2. 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

    innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的 ...

  3. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  4. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  5. HTML网页图片滚动代码

    <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...

  6. html 图片滚动代码

    我自己也在用的,网页常用!分享出来 最简单易懂源码 <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;hei ...

  7. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  8. Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Js图片滚动

    参考博文:http://blog.chinaunix.net/uid-12304670-id-2947067.html <%@ Page Title="" Language= ...

随机推荐

  1. Spring Resource 类图

    插播个广告 老丈人家的粉皮儿,农产品,没有乱七八糟的添加剂,欢迎惠顾 

  2. SVN启停脚本

    说明:特别注意红色部分,外部$1传入Msg函数时失效,故特此读取一遍再传入!执行时要给脚本加执行权限!#chmod 755 /scripts/svn [root@kazihuo /scripts]# ...

  3. 单进程单线程的Redis如何能够高并发

    redis快的原因: 1.纯内存操作2.异步非阻塞 IO 参考文档: (1)http://yaocoder.blog.51cto.com/2668309/888374 (2)http://www.cn ...

  4. Centos7一键编译安装zabbix-4.0.2

    ##只针对centos7的系统有效,centos6无效,mysql zabbix用户:zabbix,密码:zabbix;建议用全新的centos7服务器 软件版本: (nginx-1.14.2.php ...

  5. jQuery UI dialog 使用记录

    1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("open&q ...

  6. IE10下 FormsAuthentication.SetAuthCookie无效的问

    问题是这样的,我在本地测试设置身份验证票据都没问题,发布到服务器后访问地址添加了一些特殊的字符,看起来像加过密的,如下: http://www.example.com/(F(1xe9eXIxPzMAL ...

  7. 【leetcode 简单】 第一百四十六题 最长和谐子序列

    和谐数组是指一个数组里元素的最大值和最小值之间的差别正好是1. 现在,给定一个整数数组,你需要在所有可能的子序列中找到最长的和谐子序列的长度. 示例 1: 输入: [1,3,2,2,5,2,3,7] ...

  8. 支付宝hr终面,忐忑的等待结果

    上周一,内推网投了支付宝上海的 高级java软件开发工程师:阿里效率就是高,不到30分钟电话就过来了!约的上周五14:00面试:上周五技术面了2轮,第一轮是主管面试,貌似给了p6;第二轮部门总监面试, ...

  9. 2016.5.19——vector型的输入输出

    vector型的输入输出 在上节2015.5.18——leetcode:Majority Element中纠结vector的动态输入输出问题,但是发现vector传参型的不可以动态输入输出,但是vec ...

  10. connect by和strart with子句

    --使用connect by和strart with子句 SELECT [level],column,expression, ... FROM table [WHERE where_clause] [ ...