欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-25 17:33:10
html页面:

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>  

图片效果:

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

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