js 轮播图无缝连接

最新推荐文章于 2023-02-20 20:49:33 发布

石界星空

最新推荐文章于 2023-02-20 20:49:33 发布

阅读量702

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/stone10086/article/details/70332566

版权

js 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            padding: 0px;
            margin: 0;
            list-style: none;
        }
        .wrap{
            width: 320px;
            height: 300px;
            margin: 50px auto;
        }
        .picture{
            width: 320px;
            height: 175px;
            overflow: hidden;
            position: relative;
        }

        ul{
            position: absolute;
            /*top: 0;
            left: 0;*/
            /*width: 3840px;*/
        }

        ul li{
            width: 320px;
            height: 175px;

        }

        ul li img{
            display: block;
            width: 320px;
            height: 175px;
        }

        p{
            width: 160px;
            height: 100px;
            border-radius: 50%;
            background: #ddd;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }

        input{
            width: 50px;
            height: 50px;
            border: none;
            position: absolute;
            border-radius: 50%;
            font-size: 18px;
            font-weight: bold;
        }
        .top{
            top: 0px;
            left: 55px;
            background: blue;

        }
        .bottom{
            bottom: 0px;
            left: 55px;
            background: red;
        }

        .left{
            width: 60px;
            height: 50px;
            border-radius: 50%;
            top: 25px;
            left: 0px;
            background: yellow;
        }

        .right{
            width: 60px;
            height: 50px;
            border-radius: 50%;
            top: 25px;
            right: 0px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="picture">
            <ul>
                <li><img src="./imgs/1.jpeg" alt=""></li>
                <li><img src="./imgs/2.jpg" alt=""></li>
                <li><img src="./imgs/3.jpg" alt=""></li>
                <li><img src="./imgs/4.jpg" alt=""></li>
                <li><img src="./imgs/5.jpeg" alt=""></li>
                <li><img src="./imgs/6.jpg" alt=""></li>
            </ul>
        </div>
        <p>
            <input class="top" type="button" value="上"/>
            <input class="right" type="button" value="右"/>
            <input class="bottom" type="button" value="下"/>
            <input class="left" type="button" value="左"/>
        </p>
    </div>
</body>
<script>
    (function(){
        var oUl=document.querySelectorAll('ul')[0];
        var inputs=document.querySelectorAll('input');
        var timer;
        oUl.innerHTML+=oUl.innerHTML;
        var speed=6;
        var oLies=document.querySelectorAll('li');

        //左滚动
        inputs[3].onclick=function(){
            oUl.style.height = oLies[0].offsetHeight+'px';
            oUl.style.width = oLies[0].offsetWidth*oLies.length+'px';
            for (var i = 0;i<oLies.length; i++){
                oLies[i].style.float = 'left';
            };



            clearInterval(timer);
            timer=setInterval(function(){
            if(oUl.offsetLeft<=-oUl.offsetWidth*.5){
                oUl.style.left='0px';
            }
            oUl.style.left = oUl.offsetLeft+(-speed)+'px';
        },1000/60);
        };

        //向右滚动
        inputs[1].onclick=function(){
            oUl.style.height = oLies[0].offsetHeight+'px';
            oUl.style.width = oLies[0].offsetWidth*oLies.length+'px';
            for (var i = 0;i<oLies.length; i++){
                oLies[i].style.float = 'right';
            };
            oUl.style.right = '0px';


            clearInterval(timer);
            timer=setInterval(function(){
            if(oUl.offsetLeft>=-(oUl.offsetWidth*.5-oLies[0].offsetWidth)){
                oUl.style.left = -(oUl.offsetWidth-oLies[0].offsetWidth)+'px';
            };
            oUl.style.left = oUl.offsetLeft+speed+'px';
        },1000/60);
        };

        //向上滚动
        inputs[0].onclick=function(){
            oUl.style.width = oLies[0].offsetWidth+'px';
            oUl.style.height = oLies[0].offsetHeight*oLies.length+'px';
            clearInterval(timer);
            timer=setInterval(function(){
            if(oUl.offsetTop<=-oUl.offsetHeight*.5){
                oUl.style.top='0px';
            }
            oUl.style.top = oUl.offsetTop+(-speed)+'px';
        },1000/60);
        };

        //向下滚动

        inputs[2].onclick=function(){
            oUl.style.width = oLies[0].offsetWidth+'px';
            oUl.style.bottom = '0px';
            oUl.style.height = oLies[0].offsetHeight*oLies.length+'px';
            for (var i = 0;i<oLies.length; i++){
                oLies[i].style.position='absolute';
                oLies[i].style.bottom = oLies[0].offsetHeight*i+'px';
            };

            clearInterval(timer);
            timer=setInterval(function(){
            if(oUl.offsetTop>=-(oUl.offsetHeight*.5-oLies[0].offsetHeight)){
                oUl.style.top=-(oUl.offsetHeight-oLies[0].offsetHeight)+'px';
            }
            oUl.style.top = oUl.offsetTop+speed+'px';
        },1000/60);
        };

    })()
</script>
</html>

效果图：

这里写图片描述

石界星空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 轮播图无缝连接

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ padding: 0px; margin: 0; list-style: none; }
复制链接

扫一扫

专栏目录