经典论坛 » 前台制作与脚本专栏 » 向左滚动图片滚动不了

瑶子 发表于 2008-8-28 15:43

向左滚动图片滚动不了

不知为什么我这段代码无法滚了.中间的内容换成DIV的写法.因为之前是TABLE的写法.请指教,谢.
我的这段代码.
[html]<div id=demo style=overflow:hidden;height:166;width:576>
  <div class="ZL2"id=demo1>
                <ul>
            <li><a href="#"><img src="images/8kjzpic_42.jpg" /></a></li>
            <li><a href="#"><img src="images/8kjzpic_44.jpg" /></a></li>
            <li><a href="#"><img src="images/8kjzpic_46.jpg" /></li>
            <li><a href="#"><img src="images/8kjzpic_48.jpg" />云山园区</a></li>
            </ul>
                </div><div id=demo2></div></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>
[/html]

之前正确的可以滚动的:
[html]<div id=demo style=overflow:hidden;height:174;width:680>
  <table width="680" border=0 align=left cellpadding=0 cellspace=0>
    <tr>
      <td height="174" valign=top id=demo1>
<table width="100%"  border="0" cellspacing="8" cellpadding="4">
          <tr align="center">
            <td height="174"><img src="images/pic1.jpg" width="487" height="174"></td>
            <td><img src="images/pic4.jpg" width="299" height="174"></td>
            <td><img src="images/pic2.jpg" width="772" height="174"></td>
            <td><img src="images/pic3.jpg" width="856" height="174"></td>

          </tr>
        </table></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>
[/html]

caiying2007 发表于 2008-8-28 18:22

[html]
<style>
*{padding:5px;margin:0;}
#demo img{width:300px;height:200px;}
#demo div{}
ul,li{LIST-STYLE-TYPE: none;display:inline;float:left;text-align:center;padding:0 1px;}
.ZL2{float:left;width:1244px;}
img{border:0}
</style>
<div id=demo style="overflow:hidden;height:240px;width:576" >
<div id="con" style="width:2500px">
        <div class="ZL2"id=demo1>
                <ul>
            <li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas003.jpg"/><br>111</a></li>
            <li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas005.jpg" /><br>222</a></li>
            <li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas001.jpg" /><br>333</li>
            <li><a href="#"><img src="http://desk.blueidea.com/DESK/XP/Vista_Ultimate/Vistas/225/Vistas009.jpg" /><br>444</a></li>
            </ul>
        </div>
        <div class="ZL2" id=demo2 style="margin-left:-16px;"></div>
</div>
</div>
<script>
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth-18
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

[/html]

[[i] 本帖最后由 caiying2007 于 2008-8-28 18:25 编辑 [/i]]

瑶子 发表于 2008-8-29 11:48

谢谢版主.可以滚动了.不过要在FF下兼容的话,还要定义.
var demo = document.getElementById('demo')
var demo1 = document.getElementById('demo1')
var demo2 = document.getElementById('demo2')

查看完整版本: 向左滚动图片滚动不了