图片滚动问题
我的图片滚动的代码除了在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>
[解决办法]
IE6 兼容性问题
http://www.25175.com/200609/25175/25175_html/2010-01/3243p6.html
[解决办法]
其实图片滚动很简单
例如如果4张图片滚动,那就把第一张图片加到第四张图片的后面,然后将这5张图片的容器向左移一个图片的宽度,然后删除掉第一个元素,再把当前第一个元素(其实是原来的第二个图片),附加到第四张(其实是原来的第五个图片)图片的后面,再向左移一个图片的宽度,重复上面的步骤即可。