首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

怎么实现同页面出现多组无缝图片滚动

2012-03-15 
如何实现同页面出现多组无缝图片滚动?常见的代码是divid demo divid demo1 /divdivid demo

如何实现同页面出现多组无缝图片滚动?
常见的代码是
<div   id= "demo ">
    <div   id= "demo1 "> </div>
    <div   id= "demo2 "> </div>
</div>
<script>
var   speed=30
demo2.innerHTML=demo1.innerHTML
function   Marquee(){
if(demo2.offsetTop-demo.scrollTop <=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var   MyMar=setInterval(Marquee,speed)
demo.onmouseover=function()   {clearInterval(MyMar)}
demo.onmouseout=function()   {MyMar=setInterval(Marquee,speed)}
</script>


我想请问大家,如果一个页面出现两组滚动的图片,怎么做呢?
js要写两个除了id不同其它的都相同的程序么?




[解决办法]
把滚动的JS部分用函数封装起来,然后传ID进去分别调用。

<BODY>
<div style= "float:left; ">
<div id=demo1 style=overflow:hidden;height:150;width:182;background:#FFFFFF;color:#ffffff>
<div id=demo11>
<img src= "http://www.csdn.net/Images/logo_csdn.gif " border= "1 " hspace= "2 ">
<img src= "http://images.csdn.net/20070306/API120[1].60.gif " border= "1 " hspace= "2 ">
<img src= "http://www.csdn.net/Images/logo_csdn.gif " border= "1 " hspace= "2 ">
<img src= "http://images.csdn.net/20070306/API120[1].60.gif " border= "1 " hspace= "2 ">
</div>
<div id=demo12> </div>
</div>
</div>

<div style= "float:right; ">
<div id=demo2 style=overflow:hidden;height:150;width:182;background:#FFFFFF;color:#ffffff>
<div id=demo21>
<img src= "http://www.csdn.net/Images/logo_csdn.gif " border= "1 " hspace= "2 ">
<img src= "http://images.csdn.net/20070306/API120[1].60.gif " border= "1 " hspace= "2 ">
<img src= "http://www.csdn.net/Images/logo_csdn.gif " border= "1 " hspace= "2 ">
<img src= "http://images.csdn.net/20070306/API120[1].60.gif " border= "1 " hspace= "2 ">
</div>
<div id=demo22> </div>
</div>
</div>
<script>
var speed=30;
function roll(demo,demo1,demo2){//将控制图片滚动的JS封装起来
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop <=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}

var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}

roll(demo1,demo11,demo12);//左边一组
roll(demo2,demo21,demo22);//右边一组
</script>
</BODY>
[解决办法]
http://community.csdn.net/Expert/topic/5283/5283616.xml?temp=.2678949
[解决办法]
http://www.carsclub.com.cn 看这里就是两组
[解决办法]
我试了下
yiran5467(依苒)
的可以啊/ie/firefox都行
[解决办法]
借宝地一问,为什么用yiran5467(依苒) 的方法,其中的类似demo.scrollTop++;这样的赋值都不好使了呢, demo.scrollLeft 始终为0!请高手指点!
------解决方案--------------------


Click the link to solve your problem.Good luck!

热点排行
Bad Request.