图片循环滚动效果

最新推荐文章于 2023-01-06 15:42:42 发布

zsf53543831

最新推荐文章于 2023-01-06 15:42:42 发布

阅读量647

点赞数

文章标签：图片滚动

本文链接：https://blog.csdn.net/zsf53543831/article/details/50710105

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        * { margin:0;padding:0}
        .containerBox { position: relative;overflow: hidden; width: 900px; height:60px;margin:50px auto;border: 1px solid red;}
        .containerBox ul  { position:absolute;overflow: hidden;height: 60px; }
        .containerBox ul  li { display:inline; width:120px; height:60px; margin:0 15px; float:left;}
    </style>
    <script type="text/javascript">
        $(function () {
            //为了使ul向左滚动能够用不停止（看上去是这样的），需要复制出来一份ul，当原始ul向左滚动时，复制出来的ul能够跟在原始ul的后面，看起来是连续循环不间断的。所以，只需要解决当原始ul滚动结束，后续复制的ul能够连续跟着，并且当复制出来的ul滚动结束，还能够循环下去就可以了。因此，就是当原始ul滚动结束时，复制出来的ul到达了原始ul的初始位置，这时，将两个ul的left属性全部初始化，无缝切换。
            //如果当前div的宽度不够放下所有的图片 则图片滚动
            //思路就是复制出来一个ul，left值为当前ul的宽度。复制出来的ul与原始ul一起向左滚动。
            //当滚动值与ul的宽度一致时，说明复制的ul滚动到了当前ul的原始位置。这时，把两个ul的left全部复原。
            if ($(".containerBox ul li").length > $(".containerBox").width()/150) {
                var ulWidth = $(".containerBox ul li").length * 150;//计算出ul的长度=li的个数*（li的宽度+2*margin值15）
                var cloneList = $(".containerBox ul").clone();
                $(".containerBox").append(cloneList);//复制出来一个ul加载到当前ul的后面
                $(".containerBox ul").css("width", ulWidth + "px"); //把当前ul的宽度赋值为ulWidth，以使所有的li都在同一行上
                $(cloneList).css("left", ulWidth + "px"); //由于ul是absolute，为了使复制出来的跟在当前ul后面，给复制的ul的left属性赋值为ulWidth
                var left = 0, interval;
                Scroll();
                //当鼠标放在ul上时，停止滚动
                $(".containerBox ul").hover(function () {
                    clearInterval(interval);
                }, function () {
                    Scroll();
                })
                function Scroll() {
                    interval = setInterval(function () {
                        //每25ms执行一次滚动
                        left = left - 1; //向左滚动-1px
                        //当left值等于ulWidth时，说明当前ul已经滚动到看不到的位置了，复制的ul滚动到了当前ul的原始位置
                        //这时，使left归0，相当于初始化了当前ul跟复制ul的位置。就能达到无限滚动的效果了。
                        if (Math.abs(left) >= ulWidth) {
                            left = 0;
                        }
                        $(".containerBox ul:eq(0)").css({ "left": left + "px" });
                        $(".containerBox ul:eq(1)").css({ "left": (ulWidth + left) + "px" });
                    }, 25);
                }
            }

        })
    </script>
</head>
<body>
    <div class="containerBox">
        <ul>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片1"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片2"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片3"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片4"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片5"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片6"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片7"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片8"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片9"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片10"></a></li>
            <li><a href="javascript:void(0)"><img width="120" height="60" alt="图片11"></a></li>
        </ul>
    </div>
</body>
</html>

zsf53543831

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片循环滚动效果

* { margin:0;padding:0} .containerBox { position: relative;overflow: hidden; width: 900px; height:60px;margin:50px auto;border: 1px solid red;} .containerBox ul { position:absolute;ov
复制链接

扫一扫