常见的代码是
<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!请高手指点!
------解决方案--------------------