友情链接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>  

图片效果：