原生js实现走马灯效果

最新推荐文章于 2024-07-30 10:56:44 发布

겐호 3

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.1k

点赞数 1

分类专栏： js学习文章标签： javascript html css html5 前端

本文链接：https://blog.csdn.net/long321041080/article/details/122235968

版权

js学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义走马灯</title>
    <style>
        #swipper {
            height: 360px;
            margin: 100px auto;
            overflow: hidden;
        }
        
        #swipper ul {
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
            display: flex;
        }
        
        #swipper li {
            list-style: none;
            width: 600px;
            height: 100%;
            flex-shrink: 0;
            position: relative;
            transition: all 0.6s;
            box-sizing: border-box;
            z-index: 0;
        }
        
        #swipper li:hover {
            z-index: 1;
            transform: scale(1.2);
        }
        
        #swipper img {
            width: 100%;
            height: 100%;
            position: absolute;
            object-fit: cover;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="swipper">
        <!-- type1 js插入节点 -->
        <ul></ul>

        <!-- type2 固定节点 -->
        <!-- <ul>
            <li>
                <img src="http://n.sinaimg.cn/photo/transform/700/w1000h500/20211002/658c-a8f83bea938d25b7c776d54bdfda3655.jpg" alt="">
            </li>
            <li>
                <img src="http://n.sinaimg.cn/public_column/700/w1000h500/20211221/8666-7568268466f4f4cb06b4d6cf393e22b2.jpg" alt="">
            </li>
            <li>
                <img src="http://n.sinaimg.cn/news/transform/700/w1000h500/20210316/51c0-kmkptxe0299440.jpg" alt="">
            </li>
            <li>
                <img src="http://n.sinaimg.cn/photo/transform/700/w1000h500/20201106/1ad8-kcpxnwv8925892.png" alt="">
            </li>
        </ul> -->
    </div>
</body>
<script>
    // js填充数据
    let ulNode = document.querySelector('ul');
    let imgArr = [{
        id: 1,
        src: "http://n.sinaimg.cn/photo/transform/700/w1000h500/20211002/658c-a8f83bea938d25b7c776d54bdfda3655.jpg",

    }, {
        id: 2,
        src: "http://n.sinaimg.cn/public_column/700/w1000h500/20211221/8666-7568268466f4f4cb06b4d6cf393e22b2.jpg",

    }, {
        id: 3,
        src: "http://n.sinaimg.cn/news/transform/700/w1000h500/20210316/51c0-kmkptxe0299440.jpg",

    }, {
        id: 4,
        src: "http://n.sinaimg.cn/photo/transform/700/w1000h500/20201106/1ad8-kcpxnwv8925892.png",

    }, ]
    let li = '';
    for (let x of imgArr) {
        li += `<li> <img src="${x.src}" key="${x.id}" /> </li>`
    }
    ulNode.innerHTML = li;

    // 走马灯实现效果
    var oContainer = document.querySelector("#swipper");
    var oWrapper = document.querySelector("ul");
    var oSlide = document.querySelectorAll("li");
    // 计算总宽度
    var wrapperW = oSlide[0].offsetWidth * oSlide.length;
    // 复制一遍li总长度，实现无缝连接
    oWrapper.style.width = wrapperW * 2 + "px";
    oWrapper.innerHTML += oWrapper.innerHTML;

    if (wrapperW < oContainer.offsetWidth) {
        oContainer.style.width = wrapperW + "px";
    }
    var i = 0,
        timer = null;
    var sliderMove = function() {
        timer = setInterval(function() {
            i++;
            if (i > wrapperW) {
                i = 0;
            }
            oWrapper.style.transform = 'translate(' + (-i) + 'px)';
        }, 10)
    }
    sliderMove();
    oContainer.addEventListener("mouseover", function() {
        clearInterval(timer);
    })
    oContainer.addEventListener("mouseout", function() {
        sliderMove(timer);
    })
</script>

</html>

겐호 3

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js实现走马灯效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自.
复制链接

扫一扫

专栏目录