div+css布局的图片连续滚动js实现代码

html布局代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="Marquee.js"></script> <style type="text/css">   </style> </head> <body>  <div id="demo"> <ul id="demo1"> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> <li><a href="#"><img src="" width="60" height="60" alt="图片占有位" /></a> </li> </ul> <ul id="demo2"></ul> </div>  <script> toleft("demo","demo1","demo2",30,"onedemo"); //toright("demo0","demo11","demo22",20,"ti2"); </script> </body> </html> js核心代码复制代码代码如下: //调用向左滚动 //toleft("demo","demo1","demo2",30,"ti1") //调用向右滚动 //toright("demo0","demo11","demo22",20,"ti2") function $(id) { return document.getElementById(id) } //向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。 function toleft(demo,demo1,demo2,speed,flag) { demo=$(demo); demo1=$(demo1); demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee() { if(demo2.offsetWidth-demo.scrollLeft<=0) { demo.scrollLeft-=demo1.offsetWidth } else { demo.scrollLeft++ } } flag=setInterval(Marquee,speed) demo.onmouseover=function() { clearInterval(flag); } demo.onmouseout=function() { flag=setInterval(Marquee,speed); } } //向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。 function toright(demo,demo1,demo2,speed,flag) { demo=$(demo); demo1=$(demo1); demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee() { if(demo.scrollLeft<=0) { demo.scrollLeft=demo2.offsetWidth } else { demo.scrollLeft-- } } flag=setInterval(Marquee,speed) demo.onmouseover=function() { clearInterval(flag); } demo.onmouseout=function() { flag=setInterval(Marquee,speed); } } 如需要更多的功能可以参考下面的内容：JavaScript 四个方向图片滚动效果JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

　　推荐阅读

　　Javascript 面向对象（声明篇）

由于才疏学浅，我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来，这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要，而且内容非常的繁多，在这里就分篇章逐个介绍。使用对象首>>>详细阅读

本文标题：div+css布局的图片连续滚动js实现代码

地址：http://www.17bianji.com/kaifa2/JS/26493.html

1/2 1