当前位置: 代码迷 >> JavaScript >> 怎么实现同页面出现多组无缝图片滚动
  详细解决方案

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

热度:82   发布时间:2012-03-15 11:50:38.0
如何实现同页面出现多组无缝图片滚动?
常见的代码是
<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!请高手指点!
------解决方案--------------------
  相关解决方案