怎么实现同页面出现多组无缝图片滚动
日期：2014-05-16 浏览次数：20376 次
如何实现同页面出现多组无缝图片滚动？
常见的代码是
<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！请高手指点！
------解决方案--------------------
常见的代码是
<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！请高手指点！
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
