无缝轮播图

思路

轮播思路：ul宽度等于每张图片的宽度和（如无限大），包括ul的父级div设置超出隐藏，给ul设置相对定位方便使用left进行轮播
只重复第一张图片
无缝左边过渡思路：头尾各一张相同图片，移动到最左（即尾部第一张图），取消过渡效果，瞬间跳转到头部第一图，i设置成第二张图片下标，延时器延迟恢复过渡效果和ul移动（方便过渡到第二张图）
无缝右边过渡思路：头尾各一张相同图片，移动到最右（即第一张图），取消过渡效果，瞬间跳转到尾部图片（即尾部第一张图），i设置成倒数第二张图片下标，延时器延迟恢复过渡效果和ul移动（方便过渡到第二张图）

js代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        .show{
            width: 550px;
            height: 300px;
            margin: 0 auto;
            margin-top: 50px;
            border:1px solid black;
            position: relative;
            left: 0;
            top: 0;
            cursor: pointer;
        /*     overflow: hidden; */
        }
        .banner{
            position: relative;
            display: flex;
            width: 3300px;
            list-style: none;
            height: 100%;
            left: 0;
            transition: all 1s; 
        }
        .banner>li{
            width: 550px;
            height: 300px;
        }
        
        .banner>li>img{
         width: 100%;
        height: 100%;
        }
        .show>span{
            position: absolute;
            padding: 6px 10px;
            color: white;
            background-color: rgba(0,0,0,0.3);
            top:50%;
            transform: translateY(-50%);
            display: none;
        }
        .show:hover>span{
            display: block;
        }
        .show>span:hover{
            background-color: rgba(0,0,0,0.5);
        }
        #left{
            left: 0;
            border-radius: 0 50px 50px 0;
        }
        #right{
            right: 0;
            border-radius: 50px 0 0 50px;
        }
        .cricle{
            display: flex;
            list-style: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background-color: #00000042;
            border-radius: 50px;
        }
        .cricle>li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid white;
            margin: 5px 10px;
            background: white;
        }
        .cricle>li:hover{
            background-color: #00FFFF;
        }
        </style>
    </head>
    <body>
        <div class="show">
            <ul class="banner">
                <li>
                    <img src="https://img.alicdn.com/imgextra/i3/6000000004389/O1CN01KjeXPM1iID6JKEDqI_!!6000000004389-2-octopus.png" alt="">
                </li>
            <li>
                <img src="https://img.alicdn.com/imgextra/i1/6000000005195/O1CN01PIUnnW1oFMKKQpYT9_!!6000000005195-0-octopus.jpg" alt="">
            </li>
                <li>
                    <img src="https://img.alicdn.com/imgextra/i2/6000000005143/O1CN01eOwybI1nrXjXIPemO_!!6000000005143-0-octopus.jpg" alt="">
                </li>
                <li>
                    <img src="https://img.alicdn.com/imgextra/i1/6000000001844/O1CN01NfTW3a1PUb6wvZfg8_!!6000000001844-2-octopus.png" alt="">
                </li>
                <li>
                    <img src="https://img.alicdn.com/imgextra/i2/6000000006499/O1CN01tvAkze1xsanRKfMEu_!!6000000006499-0-octopus.jpg" alt="">
                </li>
                <li>
                    <img src="https://img.alicdn.com/imgextra/i3/6000000004389/O1CN01KjeXPM1iID6JKEDqI_!!6000000004389-2-octopus.png" alt="">
                </li>
            </ul>
            <span id="left"><</span>
            <span id="right">></span>
            <ul class="cricle">
                <li style="background: black;"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script>
        var banner=document.getElementsByClassName("banner")[0]
        var show=document.getElementsByClassName("show")[0]
        var left=document.getElementById("left")
        var right=document.getElementById("right")
        var cricle=document.getElementsByClassName("cricle")[0].getElementsByTagName("li")
        var len= banner.children.length
        var i=0;
        var gtime;
        // 滚动封装
        function go(n){
            i=i+n
            
            console.log(i)
             // 左边无缝 主要头尾瞬间变
            if(i==-1){
                banner.style.transition="none"
                // 一瞬间移到到最后一张（与第一张图相同）-2750 然后变-2200px 轮播向左再变-2750
                banner.style.left = 5*-550+"px";
                i=4
                }
                console.log(i)
            
            // 右边无缝
             if(i==len){
                 // 一瞬间移到第一张0 然后变-550px 视角向左
                 banner.style.transition="none"
                 banner.style.left = "0px";
                 i=1;
             }
            
            setTimeout(function(){
            banner.style.transition="all 1s"    
            banner.style.left=(i%len)*-550+"px"
            },10)
        
        
            for(var j=0;j<cricle.length;j++){
                cricle[j].style.background="white"
            }
            
            if(i%len>=cricle.length){
                cricle[0].style.background="black"
            }else{
                cricle[i%len].style.background="black"
            }
            
        }
        // 定时器封装
          gtime=setInterval(go,1000,1)
         // 鼠标移入停止轮播
        show.onmouseover=function(){
            clearInterval(gtime)
        }
         // 鼠标移出执行轮播
        show.onmouseout=function(){
             gtime=setInterval(go,1000,1)
        }
        // 点击右按钮
        right.onclick=function(){    
            go(1)
        }
        // 点击左按钮
        left.onclick=function(){
          go(-1)
        }
        // 点击圆圈按钮
        for(var j=0;j<cricle.length;j++){
            cricle[j].index=j
            cricle[j].onclick=function(){
             go(this.index-i)
            }
        }
        
        </script>
    </body>
</html>

posted on 2021-10-25 21:46 QiKS 阅读(359) 评论(0) 收藏举报

刷新页面返回顶部

无缝轮播图

导航

公告