js实现左右无缝轮播图

今天让我们再来做一个左右无缝的轮播图吧！

在这里插入图片描述

一、准备html代码

html代码也叫结构

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title></title>
        <meta charset="UTF-8">
    </head>
    <body>              
        <div>                                         <!-- 用来做显示窗口的div -->
            <header>                                  <!--都用div的话就不好的区分的-->
                    <img src="img/1.jpg" alt="">
                    <img src="img/2.jpg" alt="">
                    <img src="img/3.jpg" alt="">
                    <img src="img/4.jpg" alt="">
                    <img src="img/1.jpg" alt="">      <!--这里把第一张图在最后也放一张-->
            </header>
            <button> > </button><button> < </button>  <!--左右滑动的按钮-->     
            <ul>                                      <!--这里是用于显示当前的点点-->
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>      
    </body>
</html>

在这里插入图片描述
这是目前的效果姑且还是给你们看看，img是行内块元素是和div是块级元素,区别是行内块是可以设置宽高，也不会单个占一整行，而div是会自己占一整行的，当然也可设置宽高

二、css代码

css代码也叫表现

*{
    margin:0;
    padding:0;
}
body{
    width: 100vw;                       /*设置body的宽度占满屏幕*/
    height:100vh;
    display:flex;                       /*居中*/
    align-items:center;
    justify-content: center;
}
div{
    position: relative;

    width:730px;                       /*这个div是用来显示的最好和图片宽高一样*/
    height: 454px;
    border:5px solid orange;

}
header{
    width: 3850px;
    height: 454px;
    position: relative;                 /*开启偏移的设置*/
}
button{                                 /*设置button 左右按钮的设置*/
    width: 35px;
    height: 35px;
    border:none;
    background: rgba(0,0,0,0.7);    
    position: absolute;
    color:white;
}
button:last-of-type{                    /*向后的按钮位置*/
    top:50%;
    transform: translateY(-50%);    
}
button:first-of-type{                   /*向前的按钮位置*/
    top:50%;
    right: 0;
    transform: translateY(-50%);
}
ul{
    width: 80%;
    height: 100px;
    position: absolute;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
}
li{                                         /*小圆点是通过li的默认样式*/
    width: 25%;
    height: 100%;
    list-style: circle inside;               /*让li的小圆点居中*/ 
    line-height: 160px;
    float: left;
    text-align: center;
    font-size:22px;
    color:yellow;
}
li:first-of-type{                        /*第一个li默认选中所以为实心圆*/
    list-style-type: disc;
}

如果你想让li的小圆点居中必须要设置list-style-position:inside和text-align:center意思是小圆点位置为内部然后文本居中，少一个都不行

在这里插入图片描述
你现在看到是这样,有黄色边框的是显示区域,我这么做是为了让你们看明白，你想他要是移动要移动谁，怎么移动，当然是显示区域不懂，后面的图片一直滑动不就成了一个滑动轮播图了。

1、小问题
看到没这个图片之间有一点缝隙了没有,明明我没有写margin和padding就算写了我也清除了默认样式啊，原因是img是行内块就是inline-black所以每次结束有一个空格

2、解决方案
我们直接把它改为块就解决问题了display:block

img{
    position: relative;			/*配合z-index使用*/
    display: block;				/*解决缝隙问题*/
    float: left;				/*通过浮动让他们显示为一行*/
    z-index: -1;				/*下降层级不能遮住按钮*/
}

在这里插入图片描述
这就是解决完了的样子，好了开始js代码

三、js代码

js代码也叫行为

window.onload=() => {                             //设置最后加载js代码
    var header=document.querySelector("header");  //获取对应的元素 
    var div=document.querySelector("div");        //queryselect是es5新出的和jq的用法一样
    var buttons=document.querySelectorAll("button");
    var index=0;                                  //翻滚的页码值
    var timeout;
    var lis=document.querySelectorAll("li");      //获取所有的li返回的是一个数组形式
    buttons[0].onclick=() =>{                     //向前按钮
        move(++index)
    }
    buttons[1].onclick=() =>{                      //向后按钮
        move(--index)

    }
    function move(idx){
        var offleft,showW;
        console.log(idx)
        clearInterval(timeout)
        timeout = setInterval(function(){               //缓慢移动
                offleft=header.offsetLeft;                 //总偏移值
                showW=(-idx*div.clientWidth-offleft)/10    //每次偏移值
                if(showW>0){                               //把数值向上走
                showW=Math.ceil(showW)
                }else{
                showW=Math.floor(showW)
                }
            header.style.left=(offleft+showW)+"px";     
        }, 30);
    }
}

在这里插入图片描述
就是这样的一个原理

那么如何达到无缝轮播了

if(index>4){						
    index=1;						
    header.style.left=0+"px";  
}else if(index<0){
    index=3;
    header.style.left=-lis,length*div.clientWidth+"px";  
}

其实这这里有一点视觉上的问题，当页码到达最大值时，我把显示的图片切换为第二张，然后起始值从零开始，切换到最开始是瞬间完成的，我们末尾的一张会有移动的效果，然后瞬间到一开始，我们肉眼无法察觉，所以会有一种移动了的效果。当然页码到最小值时还向前进的话，也是一样的。

四、完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width: 100vw;                       /*设置body的宽度占满屏幕*/
            height:100vh;
            display:flex;                       /*居中*/
            align-items:center;
            justify-content: center;
        }
        div{
            position: relative;
            overflow:hidden;					/*！！！隐藏超出的部分*/
            min-width: 730px;
            max-height: 454px;
            width:730px;                       /*这个div是用来显示的最好和图片宽高一样*/
            height: 454px;
            border:2px solid orange;

        }
        header{
            width: 3650px;
            height: 454px;
            position: relative;                 /*开启偏移的设置*/
            left: 0;
        }
        button{                                 /*设置button 左右按钮的设置*/
            width: 35px;
            height: 35px;
            border:none;
            background: rgba(0,0,0,0.7);    
            position: absolute;
            color:white;
        }
        button:last-of-type{                    /*向后的按钮位置*/
            top:50%;
            transform: translateY(-50%);    
        }
        button:first-of-type{                   /*向前的按钮位置*/
            top:50%;
            right: 0;
            transform: translateY(-50%);
        }
        ul{
            width: 80%;
            height: 100px;
            position: absolute;
            bottom:0;
            left: 50%;
            transform: translateX(-50%);
        }
        li{                                         /*小圆点是通过li的默认样式*/
            width: 25%;
            height: 100%;
            list-style-type: circle;
            list-style-position: inside;               /*让li的小圆点居中*/ 
            line-height: 160px;
            float: left;
            text-align: center;
            font-size:22px;
            color:yellow;
        }
        li:first-of-type{                        /*第一个li默认选中所以为实心圆*/
            list-style-type: disc;
        }
        img{
            position: relative;
            display: block;
            float: left;
            z-index: -1;
            width: 730px;
            height: 454px;
        }

</style>
<script>
    window.onload=() => {                             //设置最后加载js代码
        var header=document.querySelector("header");  //获取对应的元素 
        var div=document.querySelector("div");        //queryselect是es5新出的和jq的用法一样
        var buttons=document.querySelectorAll("button");
        var index=0;                                  //翻滚的页码值
        var timeout;
        var lis=document.querySelectorAll("li");      //获取所有的li返回的是一个数组形式
        buttons[0].onclick=() =>{                     //向前按钮
            move(index++)
        }
        buttons[1].onclick=() =>{                      //向后按钮
            move(index--)

        }
        var newtime=setInterval(buttons[0].onclick, 2000);
        div.onmouseout=() =>{
            newtime=setInterval(buttons[0].onclick, 2000);
        }
        div.onmouseover=()=>{
            clearInterval(newtime)
        }
        for(i in lis){                                  //小圆点点击事件
            lis[i].index=i                              //记录下标值
            lis[i].onclick=function(){    
                    circle(this.index)
                    move(this.index)
                    index=this.index

                    // this.style.listStyleType="square"
            }
        }
        function circle(num){
            if(num==4){
                num=0;
            }
            for(i of lis){
                i.style.listStyleType="circle"
            }
            lis[num].style.listStyleType="disc"
        }
        function move(){
            var offleft,showW;
            clearInterval(timeout)
            timeout = setInterval(function(){               //缓慢移动
                    if(index>4){
                        index=1;
                        header.style.left=0+"px";  
                    }else if(index<0){
                        index=3;
                        header.style.left=-(lis.length)*div.clientWidth+"px";  
                    }
                    offleft=header.offsetLeft;                 //总偏移值
                    showW=(-index*div.clientWidth-offleft)/10    //每次偏移值
                    if(showW>0){                               //把数值向上走
                    showW=Math.ceil(showW)
                    }else{
                    showW=Math.floor(showW)
                    }
                    circle(index);
                    offleft=offleft+showW
                header.style.left=offleft+"px";     
                if(showW==0){
                    clearInterval(timeout)
                }
            }, 30);
        }
}
</script>
</head>
<body>              
<div>                                         <!-- 用来做显示窗口的div -->
<header>                                  <!--都用div的话就不好的区分的-->
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/1.jpg" alt="">      <!--这里把第一张图在最后也放一张-->
</header>
<button> > </button><button> < </button>  <!--左右滑动的按钮-->     
<ul>                                      <!--这里是用于显示当前的点点-->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>      
</body>
</html>

展开只是为了让你们看的明白，给最大的父容器div 加上一条 overflow:hidden把超出的部分隐藏了就好了

五、总结

其实没有什么难的，只要思路畅通剩下的就只有把他拼接起来了，最核心的地方就在move()这个函数里面，还有一种轮播图，是一种深入浅出的，我讲讲思路，首先还是把html和css代码写的和我上面一样，然后给图片加上就是img 加上 position:absolute让他们爹叠加在一起，最后可以通过z-index或者opacity这个两个属性调整，这样一想深入浅出的那种还容易一点，对不对啊!

名字长就叫小林好了

发布了17 篇原创文章 · 获赞 20 · 访问量 4878

私信关注