代码改变世界

图片不间断滚动

2010-08-10 20:19  音乐让我说  阅读(1058)  评论(0)  编辑  收藏  举报

代码如下：

 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试</title>
    <style type="text/css">
        ul, li, img, td { font-size: 12px; list-style-type: none; text-align: center; margin: 0; padding: 0; }
        .demo { width: 230px; margin-bottom: 8px; height: 172px; overflow: hidden; }
        .demo ul { width: 408px; clear: both; }
        .demo li { width: 102px; float: left; text-align: center; }
        .demo img { margin-bottom: 8px; }
    </style>
</head>
<body>
    <div class="demo" id="demo1">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <ul>
                        <li>
                            <img src="images/005.jpg"><br>
                            滚动图5</li>
                        <li>
                            <img src="images/006.jpg"><br>
                            滚动图6</li>
                        <li>
                            <img src="images/007.jpg"><br>
                            滚动图7</li>
                        <li>
                            <img src="images/008.jpg"><br>
                            滚动图8</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>
    <!--第二个滚动图开始-->
    <div class="demo" id="demo2">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <ul>
                        <li>
                            <img src="images/001.jpg"><br>
                            滚动图1</li>
                        <li>
                            <img src="images/002.jpg"><br>
                            滚动图2</li>
                        <li>
                            <img src="images/003.jpg"><br>
                            滚动图3</li>
                        <li>
                            <img src="images/004.jpg"><br>
                            滚动图4</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>

    <script language="javascript" type="text/javascript">
        function startmarquee(lh, speed, delay, index)
        {
            var o = document.getElementById("demo" + index);
            var o_td = o.getElementsByTagName("td")[0];
            var str = o_td.innerHTML;
            var newtd = document.createElement("td");
            newtd.innerHTML = str;
            o_td.parentNode.appendChild(newtd);
            var t;
            var p = false;
            o.onmouseover = function()
            {
                p = true; 
            }
            o.onmouseout = function()
            {
                p = false; 
            }
            function start()
            {
                t = setInterval(Marquee, speed);
                if (!p)
                {
                    o.scrollLeft += 3;
                }

            }
            function Marquee()
            {
                if (o_td.offsetWidth - o.scrollLeft <= 0)
                {
                    o.scrollLeft -= o_td.offsetWidth;
                }
                else
                {
                    if (o.scrollLeft % lh != 0)
                    {
                        o.scrollLeft += 3
                    }
                    else
                    {
                        clearInterval(t);
                        setTimeout(start, delay);
                    }
                }
            }
            setTimeout(start, delay);
        }
        startmarquee(102, 1, 1500, 1);
        startmarquee(102, 30, 1, 2); //图片不间断滚动
    </script>

</body>
</html>

 

效果图如下：

 

 

等待更新...