图片轮播JS效果

来源：互联网发布：ipad免越狱下载软件编辑：程序博客网时间：2024/06/09 23:06
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head><body>    <div id="ImgDemo" class="djlynr" style="overflow: hidden; display: block; width: 748px">        <table>            <tbody>                <tr>                    <td id="ImgDemo1">                        <table>                            <tbody>                                <tr>                                    <td style="padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 0px">                                        <div>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">                                                <img alt="" src="xx.jpg"                                                    width="175" height="134"></a></div>                                        <p>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">xxx...</a></p>                                    </td>                                    <td style="padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 0px">                                        <div>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">                                                <img alt="" src="xx.jpg"                                                    width="175" height="134"></a></div>                                        <p>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">xxx...</a></p>                                    </td>                                    <td style="padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 0px">                                        <div>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">                                                <img alt="" src="xx.jpg"                                                    width="175" height="134"></a></div>                                        <p>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">xxx...</a></p>                                    </td>                                    <td style="padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 0px">                                        <div>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">                                                <img alt="" src="xx.jpg"                                                    width="175" height="134"></a></div>                                        <p>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">xxx...</a></p>                                    </td>                                    <td style="padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 0px">                                        <div>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">                                                <img alt="" src="xx.jpg"                                                    width="175" height="134"></a></div>                                        <p>                                            <a title="" href="http://www.xxx.html"                                                target="_blank">xxx...</a></p>                                    </td>                                </tr>                            </tbody>                        </table>                    </td>                    <td id="ImgDemo2">                    </td>                </tr>            </tbody>        </table>    </div>    <script type="text/javascript">        var ImgSpeed = 30;        var ImgDemo = $("#ImgDemo");        var ImgDemo1 = $("#ImgDemo1");        var ImgDemo2 = $("#ImgDemo2");        ImgDemo2.html(ImgDemo1.html());        function Marquee() {            if (ImgDemo.scrollLeft() >= ImgDemo1.width())                ImgDemo.scrollLeft(0);            else {                ImgDemo.scrollLeft(ImgDemo.scrollLeft() + 1);            }        }        var MyMar = setInterval(Marquee, ImgSpeed);        ImgDemo.mouseover(function () {            clearInterval(MyMar);        });        ImgDemo.mouseout(function () {            MyMar = setInterval(Marquee, ImgSpeed);        });    </script></body></html>
0 0