js实现图片无缝向左轮播

最新推荐文章于 2023-02-19 12:24:43 发布

sweetllh

最新推荐文章于 2023-02-19 12:24:43 发布

阅读量3.2k

点赞数 1

分类专栏： javascript 运动

本文链接：https://blog.csdn.net/sweetllh/article/details/70306127

版权

javascript 同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

运动

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<style>
    *{margin: 0;padding: 0;}
    ul, li{list-style: none;}
    .js-mask{width: 198px;height: 132px;border: 1px solid black;position: relative;overflow: hidden;margin:100px;}
    .js-mask ul{position: absolute; left:0; top:0;}
    .js-mask ul li{float:left; width:198px; height: 132px;}
    .js-mask ul li img{width: 198px; height: 132px;}
</style>
    </head>
    <body>
<div class="js-mask">
    <ul>
        <li><img src="img/1.jpg"/> </li>
        <li><img src="img/2.jpg"/> </li>
        <li><img src="img/3.jpg"/> </li>
        <li><img src="img/4.jpg"/> </li>
    </ul>
</div>
<script>
(function(){
    var oUl = document.querySelectorAll('.js-mask ul')[0];
    //console.log(oUl.innerHTML + oUl.innerHTML);
    // 获取ul里的li进行拼接，然后重新赋给ul
    oUl.innerHTML = oUl.innerHTML + oUl.innerHTML // oUl.innerHTML += oUl.innerHTML
    // 由于ul初始时是4张图片的宽度，现在把宽度变成是8张的宽度
    // 获取li，根据li的宽度重新设置ul的宽度
    var oLies = document.querySelectorAll('.js-mask li');   // 获取li
    oUl.style.width = oLies[0].offsetWidth * oLies.length + 'px';   // 设置宽度，li的宽度*li的个数

    var speed = -1;

    setInterval(function(){
        if (oUl.offsetLeft <= -oUl.offsetWidth*.5){
            oUl.style.left = '0px'; 
        }

        oUl.style.left = oUl.offsetLeft + speed + 'px';
    }, 1000/30);
})();

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