当前位置:首页 > 建站教程 > 建站经验

html图片无缝循环滚动代码

懒鸟飞 发布于

图片滚动代码经常会用到,之前已经分享过了一个,上一次用的div做的图片列表,这一次分享一个用<table>制作的图片列表,供大家学习分享,其中的显示样式需要你自己调试成需要的样式,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf8-8">
<title>test</title>
<style>
.picutre_many img{width:200px; height:150px;}
</style>
</head>
<body>
    <div id="list" class=" picutre_many"
        style="overflow: hidden; height: 150px; width: 800px; margin: 0 auto;">
        <table cellspacing="0" cellpadding="0"
            style="width: 680px; border: 0px;">
            <tr>
                <td id="list1">
                    <table style="border: 0px;" cellpadding="0" cellspacing="0">
                        <tr id="pic">
                            <td><img style="border: 0px;" alt="" src="1.jpg" /></td>
                            <td><img style="border: 0px;" alt="" src="2.jpg" /></td>
                            <td><img style="border: 0px;" alt="" src="3.jpg" /></td>
                            <td><img style="border: 0px;" alt="" src="4.jpg" /></td>
                            <td><img style="border: 0px;" alt="" src="5.jpg" /></td>
                        </tr>
                    </table>
                </td>
                <td id="list2"></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        /*图片滚动效果*/
        var speedpic = 20;//速度数值越大速度越慢
        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>
</body>
</html>
 

转载请注明原文地址:http://www.lazybirdfly.com/a/jzjy/510.html
留言与评论(共有 条评论)

   
验证码: