|
#2
gupiao1752010-05-24 14:54
<html>
<style type="text/css"> <!-- body{text-align:center;} #d1 { text-align:center; background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 900px; } #demo { text-align:center; background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 900px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } .btn { width:80px; height:30px; border:0px; } --> </style> 向左滚动 <body> <div id="d1"> <marquee direction="left" loop="-1" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="2"> <img src="pic2/01.jpg" width="180" height="255" border="0"></img> <img src="pic2/02.jpg" width="180" height="255" border="0"></img> <img src="pic2/03.jpg" width="180" height="255" border="0"></img> <img src="pic2/04.jpg" width="180" height="255" border="0"></img> <img src="pic2/05.jpg" width="180" height="255" border="0"></img> </marquee> </div> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="pic2/01.jpg" border="0" /></a> <a href="#"><img src="pic2/02.jpg" border="0" /></a> <a href="#"><img src="pic2/03.jpg" border="0" /></a> <a href="#"><img src="pic2/04.jpg" border="0" /></a> <a href="#"><img src="pic2/05.jpg" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <input id="btn" class="btn" type="button" value="滚动" onclick="gundong()"> <input id="btn1" class="btn" type="button" value="暂停" onclick="pause()"> <script> <!-- var speed=30,tt,flag=true; //speed数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function gundong(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } tt=setTimeout(gundong,speed); } function pause() { clearTimeout(tt); } --> </script> </body> </html> |
<style type="text/css">
.scrollWarp{width:100%; height:120px; margin-top:10px;}
.leftBtn{float:left; width:20px; height:118px; CURSOR: pointer}
#scrollBox2{float:left; width:700px; height:118px; OVERFLOW: hidden}
#scrollBox2_end{float:left;}
.rightBtn{float:left; width:20px; height:118px; CURSOR: pointer}
#scrollBox2 TD.tdbox {
TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 80px; PADDING-RIGHT: 41px
}
</style>
<SCRIPT type="text/javascript">
var marquee2=new Marquee("scrollBox2");
marquee2.Direction="left";
marquee2.Step=1;
marquee2.Width=700;
marquee2.Height=118;
marquee2.Timer=20;
marquee2.ScrollStep=14;
document.getElementById("leftBtn2").onclick=function(){marquee2.Direction=2};
document.getElementById("rightBtn2").onclick=function(){marquee2.Direction=3};
marquee2.Start();
</script>
<DIV class=scrollWarp>
<DIV id=leftBtn2 class=leftBtn></DIV>
<DIV id=scrollBox2 class=color_555>
<TABLE style="DISPLAY: inline" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=tdbox><A
href=""
target=_blank><IMG border=0 src="ZZ/未标题-5.jpg" width=60
height=60></A><BR><A
href=""
target=_blank align="center">标题</A> </TD>
<TD class=tdbox><A
href=""
target=_blank><IMG border=0 src="ZZ/未标题-5.jpg" width=60
height=60></A><BR><A
href=""
target=_blank align="center">标题</A> </TD>
<TD class=tdbox><A
href=""
target=_blank><IMG border=0 src="ZZ/未标题-5.jpg" width=60
height=60></A><BR><A
href=""
target=_blank align="center">标题</A> </TD>
<TD class=tdbox><A
href=""
target=_blank><IMG border=0 src="ZZ/未标题-5.jpg" width=60
height=60></A><BR><A
href=""
target=_blank align="center">标题</A> </TD>
<TD class=tdbox><A
href=""
target=_blank><IMG border=0 src="ZZ/未标题-5.jpg" width=60
height=60></A><BR><A
href=""
target=_blank align="center">标题</A> </TD>
<TD class=tdbox><A
href=""
target=_blank><IMG border=0 src="ZZ/未标题-5.jpg" width=60
height=60></A><BR><A
href=""
target=_blank align="center">标题</A> </TD>
</TR></TBODY></TABLE>
</DIV>
<DIV id=rightBtn2 class=rightBtn></DIV>
</DIV>
以上是整体代码，我是JS初学者，因为作网页需要，所以在网上找了这一段代码，但是浏览的时候完全没有反应，请哪位高手指点一二吧~多谢，多谢！
[ 本帖最后由 厉羽菲 于 2010-5-22 14:30 编辑 ]