javascript的滚动以及无缝衔接

最新推荐文章于 2023-10-16 11:19:09 发布

꧁拥抱新的每一天꧂

最新推荐文章于 2023-10-16 11:19:09 发布

阅读量271

点赞数

分类专栏：笔记个人经验总结

本文链接：https://blog.csdn.net/qq_39108459/article/details/82596064

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

个人经验总结

3 篇文章 0 订阅

订阅专栏

思路//
//从右向左移动 left值减少
//1.获取原始的left值 oldleft
//2.对left值进行减少 newleft = oldleft - dx;
//3.把减少后的值赋给ul
样式
//对父级div进行相对定位对ul进行绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动图</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    .itemlist{
        margin: 0 auto;
        width: 820px;
        height: 220px;
        border: 1px solid #ddd;
        position: relative;
    }
    .itemlist ul{
        width: 3280px;/*(3+1)*820*/
        list-style: none;
        position: absolute;
    }
    .itemlist li{
        display: inline-block;
        overflow: hidden;
    }
    .item{
        width: 250px;
        height: 200px;
        background: url("./images/1.jpg") no-repeat;
        border: 1px solid #ddd;
        margin: 10px;
        float: left;
        font-size: 20px;
        color: blue;
    }
    .clear{
        overflow: hidden;
    }
    </style>
</head>
<body>
    <div class="itemlist clear">
        <ul id="itemul">
            <li>
                <div class="item">1</div>
                <div class="item">1</div>
                <div class="item">1</div>
            </li>
            <li>
                <div class="item">2</div>
                <div class="item">2</div>
                <div class="item">2</div>
            </li>
            <li>
                <div class="item">3</div>
                <div class="item">3</div>
                <div class="item">3</div>
            </li>
            <li>
                <div class="item">1</div>
                <div class="item">1</div>
                <div class="item">1</div>
            </li>
        </ul>
    </div>
    <script>
        var itemul = document.getElementById("itemul");
        //从右向左移动  left值减少
        //1.获取原始的left值 oldleft
        //2.对left值进行减少 newleft = oldleft - dx;
        //3.把减少后的值赋给ul
        var dx = 50;
        // var oldleft = itemul.offsetLeft;
        // console.log(oldleft);
        // var newleft = oldleft - dx;
        // itemul.style.left = newleft + "px";
        //每隔25毫秒进行移动一次
        var current = 0;//第1屏
        function move(){
            current++;
            // 实现无缝衔接
            if(current == 4){
                itemul.style.left = 0 + "px";
                current = 1;
            }
            var target = -1*current*820;
            var timer = null;
            timer = setInterval(function(){
                var oldleft = itemul.offsetLeft;
                if(oldleft <= target){
                //如果left值达到了或者超过了目标值
                //停止计时器
                clearInterval(timer);
                //停止3s继续向下滚动
                setTimeout(function(){
                    move();
                },3000)
                }else{
                    var newleft = oldleft - dx;
                    itemul.style.left = newleft + "px";
                }    
            },25)
        }
        move();

    </script>
</body>
</html>

还有很大的不足，请多多指教~

꧁拥抱新的每一天꧂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的滚动以及无缝衔接

思路// //从右向左移动 left值减少 //1.获取原始的left值 oldleft //2.对left值进行减少 newleft = oldleft - dx; //3.把减少后的值赋给ul 样式 //对父级div进行相对定位对ul进行绝对定位&lt;!DOCTYPE html&gt;&lt;h...
复制链接

扫一扫

专栏目录