|
整理一个div+css图片连续滚动代码，原理跟之前发布的文章一样。
html布局代码
(责任编辑：admin)<!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"> <!-- * { margin:0; padding:0; } #demo { /*********必须的 保证超出宽度能够滚动*********/ width:600px;/*可视区域宽度*/ overflow:hidden; /*********必须的 保证超出宽度能够滚动*********/ height:80px; } #demo1,#demo2 { width:800px;/*整个图片宽度*/ float:left; } #demo img{ display:block; float:left; } #demo li { float:left; width:60px; height:80px; } --> <!-- #demo0 { /*********必须的 保证超出宽度能够滚动*********/ width:600px;/*可视区域宽度*/ overflow:hidden; /*********必须的 保证超出宽度能够滚动*********/ height:80px; } #demo11,#demo22 { width:1020px;/*整个图片宽度*/ display:block; height:80px; } #demo0 li { float:left; margin:0 5px; width:60px; height:80px; } --> </style> </head> <body> <!--结构必须的——<div class="demo"> <div class="demo1"></div> <div class="demo2"></div> </div>——结构必须的——--> <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> <!--<div id="demo0"> <div id="demo11"> <ul> <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> </div> <div id="demo22"></div> </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); } } |