div+css图片上下左右滚动代码
图片滚动经常在网页里面用到，高手们都是自己来写，我不是高手，所以高手们写了，我就搬来用了，偷偷懒，“常用js效果一：div+css图片上下左右滚动代码”这个也是在网上找的，这个被转载了很多次，测试了下，ie6,7,8还有火狐都能兼容的。还有demo哦！！需要的可以下载哈。
这是向上滚动的：
演示地址：phplover/demo/1.html
这是向下滚动的：
XML/HTML代码 style type="text/css" !-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 200px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } -- /style 向下滚动 div id="demo" div id="demo1" a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a /div div id="demo2" /div /div script !-- var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 tabtab.scrollTop=tab.scrollHeight function Marquee(){ if(tab1.offsetTop-tab.scrollTop =0)//当滚动至demo1与demo2交界时 tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 else{ tab.scrollTop-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 -- /script演示地址：phplover/demo/3.html
这是向左滚动的：
XML/HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title 无标题文档 /title /head body style .scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;} #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;} /style script language="javascript" function ScrollImgLeft(){ var speed=20 var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML function Marquee(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft =0) scroll_div.scrollLeft-=scroll_begin.offsetWidth else scroll_div.scrollLeft++ } var MyMar=setInterval(Marquee,speed) scroll_div.onmouseover=function() {clearInterval(MyMar)} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} } /script h2 align="center" 向左滚动 /h2 div div !--#####滚动区域#####-- div id="scroll_div" div id="scroll_begin" ul li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li li a href="upload/2011/11/201111111446056115.gif" / /a /li /ul /div div id="scroll_end" /div /div !--#####滚动区域#####-- /div script type="text/javascript" ScrollImgLeft(); /script /div !--//向左滚动代码结束-- /body /html演示地址：phplover/demo/2.html
这是向右滚动的代码：
XML/HTML代码 style type="text/css" !-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } -- /style 向右滚动 div id="demo" div id="indemo" div id="demo1" a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a a href="#" img src="upload/2011/11/201111141335356083.gif" border="0" / /a /div div id="demo2" /div /div /div script !-- var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab.scrollLeft =0) tab.scrollLeft+=tab2.offsetWidth else{ tab.scrollLeft-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; -- /script
