原生js实现轮播图的思路、代码及知识点！

爱被打了一巴掌 2022-02-19 16:48 142阅读 0赞

**一、轮播图实现思路：**  
1、自动轮播：  
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；  
（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；  
（3）时间函数每隔1秒执行一次。  
2、手动轮播：点击小圆圈按钮，显示相应图片。  
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；  
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；  
3、鼠标移上、移开时的事件。  
4、点击左右箭头，实现向前向后轮播图片。

**二、代码部分：**

css部分：
    <style type="text/css">
    *{
        margin:0;
        padding:0;
        list-style: none;
    }
    .bigbox{
        width:586px;
        height:469px;
        margin:0 auto;
        position:relative;
        overflow:hidden;
    }
    .img{
        width:586px;
        height:469px;
        position:absolute;
        top: 0;
        left:0;
    }
    .img a{
        width:586px;
        height:469px;
        position:absolute;
        top: 0;
        left:0;
    }
    .items{
        width:160px;
        height:16px;
    /*    border:1px solid red;*/
        position:absolute;
        bottom:10px;
        left:220px;
    }
    .items .item{
        width:16px;
        height:16px;
        background:skyblue;
        border-radius: 50%;
        float: left;
        margin-right: 10px;
        text-align: center;
        line-height: 16px;
        cursor:pointer;
    }
    .button{
            width:586px;
            height:350px;
            position:absolute;
            top:50%;
            margin-top: -35px;
            z-index: 3;
        }
        .btn{
            width:50px;
            height:70px;
            background:rgba(0, 0, 0, 0.5);
            color:white;
            font-size: 36px;
            text-align: center;
            line-height: 70px;
        }
        .fr{
            float:right;
        }
        .fl{
            float:left;
        }
    </style>

内容部分：
    <body>
        <div class="bigbox">
            <div class="img">
                <a href="" style="z-index:1;background:skyblue"><img src="images/lunbo01.jpg" alt="" /></a>
                <a href=""><img src="images/lunbo03.jpg" alt="" /></a>
                <a href=""><img src="images/lunbo08.jpg" alt="" /></a>
                <a href=""><img src="images/lunbo05.jpg" alt="" /></a>
                <a href=""><img src="images/lunbo06.jpg" alt="" /></a>
                <a href=""><img src="images/lunbo08.jpg" alt="" /></a>
            </div>
            <ul class="items" style="z-index:99">
                <li class="item">1</li>
                <li class="item">2</li>
                <li class="item">3</li>
                <li class="item">4</li>
                <li class="item">5</li>
                <li class="item">6</li>
            </ul>
            <div class="button">
                <div class="btn fl" id="left"><</div>
                <div class="btn fr" id="right">></div>
            </div>
        </div>
    </body>

script部分：
    <script type="text/javascript">
        var num = 0;    //获取当前图片的下标；
        var img = document.getElementsByClassName("img")[0].getElementsByTagName("a"); //获取图片；
        var li = document.getElementsByClassName("item");   //获取li数组元素；
        var mouse = document.getElementsByClassName("bigbox")[0]; //获取放图片的整个盒子；
           //自动轮播
        function ImgAuto(adress){ 
            for (var i = 0; i < img.length; i++) {
                img[i].style.zIndex = "0";  //使当前所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
                li[i].style.background = "skyblue";
            };
            img[num].style.zIndex = "1"; //使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
            li[num].style.background = "white";
            if (adress == "right") {
                 num++;
                 if (num >= img.length) {
                     num = 0;   //当num大于等于图片数组长度时，归零；
                 };
            }else if(adress == "left"){
                num--;
                if(num < 0){
                    num = img.length-1;
                }
            } 
        }
        var move = setInterval(function(){
            ImgAuto("right");
        },1000); //每隔1秒执行一次
        
    	//手动轮播
        for (var i = 0; i < img.length; i++) {
            li[i].index = i;
            li[i].onclick = function(){
                for (var j = 0; j < img.length; j++) {
                    img[j].style.zIndex = "0";
                    li[j].style.background = "skyblue";
                };
                this.style.background = "white";
                img[this.index].style.zIndex = "1";
                num = this.index;
            }
        };
        
        mouse.onmouseover = function(){ //鼠标移上去的事件（停止自动轮播）
            clearInterval(move);
        }
        mouse.onmouseout = function(){ //鼠标移开事件（恢复自动轮播）
            move = setInterval(function(){
            ImgAuto("right")
            },1000);
        }
    
        left.onclick = function(){ //左边按钮事件；
            ImgAuto("left");
        }
        right.onclick = function(){ //右边按钮事件；
            ImgAuto("right"); 
        }
    </script>

**三、知识点。**  
1、获取DOM元素：  
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。  
（2）document.getElementsByClassName()：通过class属性获取对象。  
（3）document.getElementsByTagName()：通过标签名获取对象。  
（4）document.querySelectorAll():可通过所有获取。  
2、(1)onmouseover():鼠标移上时事件；  
(2)onmouseout():鼠标移开时事件；  
3、onclick():单击事件。