读书人

图片滚动有关问题

发布时间: 2012-05-28 17:59:33 作者: rapoo

图片滚动问题
我的图片滚动的代码除了在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张图片的容器向左移一个图片的宽度,然后删除掉第一个元素,再把当前第一个元素(其实是原来的第二个图片),附加到第四张(其实是原来的第五个图片)图片的后面,再向左移一个图片的宽度,重复上面的步骤即可。

读书人网 >.NET

热点推荐