JS图片左右来回滚动代码急求！！！

答案:3 悬赏:10 手机版

解决时间 2021-04-23 05:54

提问者网友：自食苦果
2021-04-22 21:53

求 ~！！

图片可以左右来回滚动

还要图片带超连有图表可以控制左右滚动

鼠标移到图片上图片停止滚动

急求谢谢~！！！

最佳答案

五星知识达人网友：时间的尘埃
2021-04-22 23:29

<!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 src="js/ScrollPic.js" type=text/javascript></SCRIPT>
<style>
body{ font-size:12px;}
a{ color:#0033FF; text-decoration:none;}
.photo{clear:both;}
.photol, .photor{width:15px;}
.photoc{ width:920px; height:135px; background:url(images/photobgc.gif) left top repeat-x; overflow:hidden; }
.photoc ul{margin:8px 0; padding:0; list-style:none; height:120px; overflow:hidden;}
.photoc li{ float:left;width:160px;text-align:center;}
.photoc li img{ border:1px solid #CCC; padding:2px;}
.photo .title{ height:25px; line-height:25px; margin:0 0 7px 0; padding-left:25px; background:url(images/alltitle.gif) left 0px no-repeat; font-size:14px;}
</style>
</head>
<body>

<div class="photo marginT" >
<p class="title"><strong>香车美女</strong></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="photol" id="LeftArr"><img src="images/photobtl.gif" /></td>
<td class="photoc">
<ul id="ISL_Cont_1">
<li><a href=" http://www.qq.com"><img src="images/1s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/2s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/3s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/4s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/5s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/6s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/7s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/8s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/9s.jpg" border="0" /></a></li>
<li><a href=" http://www.qq.com"><img src="images/10s.jpg" border="0" /></a></li>
</ul>
</td>
<td class="photor" id="RightArr"><img src="images/photobtr.gif" /></td>
</tr>
</table>
<SCRIPT language=javascript type=text/javascript>
<![CDATA[//><!--
var scrollPic_02 = new ScrollPic();
scrollPic_02.scrollContId = "ISL_Cont_1"; //内容容器ID
scrollPic_02.arrLeftId = "LeftArr";//左箭头ID
scrollPic_02.arrRightId = "RightArr"; //右箭头ID

scrollPic_02.frameWidth = 920;//显示框宽度
scrollPic_02.pageWidth = 152; //翻页宽度

scrollPic_02.speed = 10; //移动速度(单位毫秒，越小越快)
scrollPic_02.space = 20; //每次移动像素(单位px，越大越快)
scrollPic_02.autoPlay = true; //自动播放
scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒)

scrollPic_02.initialize(); //初始化

//--><!]]>
</SCRIPT>
</div>
</body>
</html>

加我QQ，我把js和图片一起打包发给你就是了。

全部回答

1楼网友：三千妖杀
2021-04-23 00:11

这个代码网上很多，你看看这个网址 http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/18/1415328.html

2楼网友：独钓一江月
2021-04-22 23:50

向上滚动的代码： <div id=demo pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2 function Marquee(){ if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器 </script>

向下滚动： <div id=demo pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop<=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>

向左滚动： <div id=demo pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

JS图片左右来回滚动代码 急求！！！

JS图片左右来回滚动代码急求！！！