| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 499 人关注过本帖
标题:求助!按扭控制的JS图片横向滚动
只看楼主 加入收藏
厉羽菲
Rank: 1
来 自:河北
等 级:新手上路
帖 子:4
专家分:0
注 册:2010-4-21
结帖率:50%
收藏
已结贴  问题点数:10 回复次数:1 
求助!按扭控制的JS图片横向滚动
<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 编辑 ]
搜索更多相关主题的帖子: 滚动 
2010-05-22 10:42
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:10 
<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>

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-05-24 14:54
快速回复:求助!按扭控制的JS图片横向滚动
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.017505 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved