div+css布局的图片连续滚动js实现代码
2010-05-04 00:00
1306 查看
html布局代码
js核心代码
如需要更多的功能可以参考下面的内容:
JavaScript 四个方向图片滚动效果
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
<!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); } }
如需要更多的功能可以参考下面的内容:
JavaScript 四个方向图片滚动效果
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
相关文章推荐
- div+css布局的图片连续滚动js实现代码
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- JS+CSS实现4张图片滚动切换代码
- js+div实现文字滚动和图片切换效果代码
- 一款JS+CSS实现的无缝平滑图片滚动代码
- DIV+CSS+JS实现不间断横向滚动代码
- DIV+CSS+JS不间断横向滚动实现代码
- js+div实现图片滚动效果代码
- js实现图片向上连续滚动特效代码(含注释)
- JS实现div内部的文字或图片自动循环滚动代码
- js+div实现文字滚动和图片切换效果代码
- div+css+js实现无缝滚动类似marquee无缝滚动代码
- DIV+CSS+JS不间断横向滚动实现代码
- JS实现div内部的文字或图片自动循环滚动代码
- js+div实现图片滚动效果代码
- JS实现图片从右向左滚动代码
- js+CSS 图片等比缩小并垂直居中实现代码
- js+CSS 图片等比缩小并垂直居中实现代码
- JS实现图片横向滚动效果示例代码