网站底部企业图片滚动

最新推荐文章于 2021-03-28 10:59:33 发布

后生丶

最新推荐文章于 2021-03-28 10:59:33 发布

阅读量258

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_30449567/article/details/82688450

版权

html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

HTML代码

<!-- 底部图片滚动 -->
<div id="list" class="contents">
    <table>
        <tr>
            <td id="list1">
                <table style="border: 0;" cellpadding="0" cellspacing="0">
                    <tr id="pic">
                        <td><a href=""><img src="images/img-1.jpg" alt="滚动" /></a></td>
                        <td><a href=""><img src="images/banner-1.jpg" alt="滚动" /></a></td>
                        <td><a href=""><img src="images/img-1.jpg" alt="滚动" /></a></td>
                        <td><a href=""><img src="images/banner-1.jpg" alt="滚动" /></a></td>
                        <td><a href=""><img src="images/img-1.jpg" alt="滚动" /></a></td>
                        <td><a href=""><img src="images/banner-1.jpg" alt="滚动" /></a></td>
                    </tr>
                </table>
            </td>
            <td id="list2"></td>
        </tr>
    </table>
</div>

CSS代码：

/*底部图片滚动*/
#list {
  overflow: hidden;
  margin: 0 auto;
}
#list img{
  width: 230px;
  height: 145px;margin-right: 12px;
}

JS代码：

$(function(){
        

        //底部图片滚动
        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("list2").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);
        };
    });