我的图片滚动的代码除了在IE6中不能正常滚动外,其它浏览器都可以正常滚动,麻烦各位帮我看看。是在哪里错了。
C# code
<div id="ProductsShowInFPBody">
<div id="demo" style="overflow: hidden;">
<table>
<tr>
<td>
<div id="demo1">
<asp:DataList ID="dstProduct" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<div id="ProductItem">
<div class="picFit" style="border: 1px solid #c6c4c4; overflow: hidden; width: 130px;
height: 112px; padding: 0px; margin-top: 0px; text-align: center; vertical-align: middle">
<a href='ProductDetail.aspx?ID=<%#Eval("ID") %>&menuID=3&menuName=产品展示'>
<img width="130" height="110" style="border: none; overflow: hidden;" src='<%#Eval("ProductImage") %>'
alt='<%#Eval("ProductName") %>' /></a>
</div>
<div style="text-align: center; margin-top: 10px; width: 130px; height: 30px;">
<a href='ProductDetail.aspx?ID=<%#Eval("ID") %>&menuID=3&menuName=产品展示' class="title">
<%#Eval("ProductName") %></a> </a>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</td>
<td>
<div id="demo2">
</div>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var speed = 30;
var demo = $("div#demo");
var demo1 = $("div#demo1");
var demo2 = $("div#demo2");
demo2.html(demo1.html());
function Marquee() {
if (demo.scrollLeft() >= demo1.width())
demo.scrollLeft(0);
else {
demo.scrollLeft(demo.scrollLeft() + 1);
}
}
var MyMar = setInterval(Marquee, speed)
demo.mouseover(function () {
clearInterval(MyMar);
})
demo.mouseout(function () {
MyMar = setInterval(Marquee, speed);
})
</script>
例如如果4张图片滚动,那就把第一张图片加到第四张图片的后面,然后将这5张图片的容器向左移一个图片的宽度,然后删除掉第一个元素,再把当前第一个元素(其实是原来的第二个图片),附加到第四张(其实是原来的第五个图片)图片的后面,再向左移一个图片的宽度,重复上面的步骤即可。