友情链接logo图进行自动轮播代码实现教程

HTML页面：

<p 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>  
</p>  

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>  

图片效果：