jquery实现图片慢慢向左轮播

最新推荐文章于 2024-04-08 16:26:29 发布

一只胡萝卜

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量1.3k

点赞数 1

分类专栏：轮播效果文章标签：向左轮播无缝轮播

轮播效果专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <script src="./dist/js/jquery.min.js"></script>
    <script src="./dist/js/bootstrap.min.js"></script>
    <link href="./dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<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>
<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';
        }, 300/30);
    })();

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

这里写图片描述