友情链接logo图进行自动轮播

友情链接logo图进行自动轮播

HTML页面：

<div id="list" class="picutre_many" style="overflow: hidden; width: 100%; margin: 0 auto">
    <table cellspacing="0" cellpadding="0" style="width: 100%; border: 0">
        <tr>
            <td id="list1">
                <table style="border: 0" cellpadding="0" cellspacing="0">
                    <tr id="pic">
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_01.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_02.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_03.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_04.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_05.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_06.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_07.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_08.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_09.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_10.jpg" /></a>
                        </td>
                        <td>
                            <a href=""><img style="border: 0;" alt="" src="img/LOGO_11.jpg" /></a>
                        </td>
                    </tr>
                </table>
            </td>
            <td id="list2"></td>
        </tr>
    </table>
</div>

JS脚本：

<script type="text/javascript">
    /*图片滚动效果*/
    var speedpic = 30;//速度数值越大速度越慢
    document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
    function Marqueepic() {
        if (document.getElementById("list2").offsetWidth- document.getElementById("list").scrollLeft <= 0) {
            document.getElementById("list").scrollLeft -= document.getElementById("list1").offsetWidth;
        } else {
            document.getElementById("list").scrollLeft++;
        }
    }
    var MyMarpic = setInterval(Marqueepic, speedpic);
    document.getElementById("list").onmouseover = function() {
        clearInterval(MyMarpic);
    }
    document.getElementById("list").onmouseout = function() {
        MyMarpic = setInterval(Marqueepic, speedpic);
    }
</script>

图片效果：