20行js代码实现左右无缝轮播

最新推荐文章于 2024-05-20 18:12:41 发布

weixin_34315665

最新推荐文章于 2024-05-20 18:12:41 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/lurenjiazrj/p/8390895.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播图</title>
    <style>
        #box{
            width: 900px;
            height: 300px;
            position: relative;
            margin: 200px auto;
        }
        #imgBox{
            height: 300px;
            width: 900px;
            position: absolute;
            overflow: hidden;
        }
        #imgBox img{
            position: absolute;
            z-index: 1;
        }
        #btn{
            width: 900px;
            height: 300px;
            position: relative;
            z-index: 4;
        }
        #btn img{
            width: 20px;
            height: 20px;
            position: absolute;
            cursor: pointer;
        }
        #btn img:first-child{
            left:10px;
            top:140px;
        }
        #btn img:last-child{
            right:10px;
            top:140px;
        }
        @keyframes moveRight{
            0%{left:900px;}
            100%{left:0;}
        }
        @keyframes moveLeft{
            0%{left:0;}
            100%{left:-900px;}
        }
        @keyframes moveRight2{
            0%{left:0px;}
            100%{left:900px;}
        }
        @keyframes moveLeft2{
            0%{left:-900px;}
            100%{left:0px;}
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="imgBox">
            <img src="11.jpg" alt="" id="1">
            <img src="22.jpg" alt="" id="2">
            <img src="33.jpg" alt="" id="3">
        </div>
        <div id="btn">
            <img src="left.png" alt="" id="left">
            <img src="right.png" alt="" id="right">
        </div>
    </div>

</body>
</html>

js部分

<script>
    var imgArr=document.getElementById('imgBox').children;
    var left=document.getElementById('left');
    var right=document.getElementById('right');
    var tem;
    arr=Array.from(imgArr);
    left.onclick=function () {
        arr[0].style.zIndex=1;
        arr[arr.length-1].style.animation='moveLeft 1s';
        arr[arr.length-1].style.zIndex=2;
        arr[arr.length-2].style.animation='moveRight 1s';
        arr[arr.length-2].style.zIndex=3;
        tem=arr.pop();
        arr.unshift(tem);
        };
    right.onclick=function () {
        arr[arr.length-2].style.zIndex=1;
        arr[arr.length-1].style.animation='moveRight2 1s';
        arr[arr.length-1].style.zIndex=2;
        arr[0].style.animation='moveLeft2 1s';
        arr[0].style.zIndex=3;
        tem=arr.shift();
        arr.push(tem);
    }
</script>

转载于:https://www.cnblogs.com/lurenjiazrj/p/8390895.html

weixin_34315665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20行js代码实现左右无缝轮播

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝轮播图</title> <style> #box{ width: 900px; ...
复制链接

扫一扫