js原生实现简易轮播图效果，原理简单易懂

谁借莪１个温暖的怀抱￠ 2022-02-05 13:37 218阅读 0赞

# 原生js实现简易的轮播图 #

用最基础的方式实现想不到的效果，能完成一个轮播图，能让你的兴趣大增。对于初学者来说，学完JavaScript基础知识，就要运用综合知识，实现一些网页的基础效果。如果代码，或者解析哪里有问题的，欢迎大家纠正。

## 原理 ##

将图片全部重叠在一起，并且给所有的图片设置隐藏，第一张图片设置显示。然后依靠点击事件，显示出相应的图片。这样一个简单的轮播图就完成了。  
![在这里插入图片描述][20190505224712772.gif]

## 首先写出静态页面 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="css/css.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="all" class="all">
        <div class="head">
            <ul id="dots">
                <a href="#"><li class="active">图片一</li></a>
                <a href="#"><li class="">图片二</li></a>
                <a href="#"><li class="">图片三</li></a>
                <a href="#"><li class="">图片四</li></a>
            </ul>
        </div>
        <div class="main" id="main">
            <div class="banner" id="banner">
                <a href="">
                    <div class="banner-slide slide1 slide-active"></div>
                </a>
                <a href="">
                    <div class="banner-slide slide2"></div>
                </a>
                <a href="">
                    <div class="banner-slide slide3"></div>
                </a>
                <a href="">
                    <div class="banner-slide slide4"></div>
                </a>
            </div>
        </div>
    </div>
    <script src="js/js.js">
    </script>
    </body>
    </html>

**以及css样式**

*   {
        margin:0;
        padding: 0;
    }
    ul  {
        list-style: none;
    }
    body {
        font-family: Microsoft YaHei;
    }
    .all{
        height: 510px;
    }
    .head  {
        width: 1200px;
        height: 50px;
        margin: 0 auto;
    }
    .head ul{
        float: left;
    }
    .head ul li{
        width: 300px;
        list-style: none;
        font-size: 20px;
        padding: 11px 0;
        color:#666;
        text-align: center;
        float: left;
        border-radius:5px;
    }
    li:hover{
        background-color: #FFCC00;
    }
    .active{
        background-color:#FFCC00;
    }
    .main {
        width: 1200px;
        height:460px;
        margin:0px auto;
        overflow: hidden;
    }
    .banner {
        width: 1200px;
        height: 460px;
        overflow: hidden;
        position: relative;
    }
    .banner-slide{
        width: 1200px;
        height: 460px;
        background-repeat: no-repeat;
        position: absolute;
        display: none;
    }
    .slide-active{
        display: block;
    }
    .slide1{
        background-image: url("../img/1.jpg");
    }
    .slide2{
        background-image: url("../img/3.jpg");
    }
    .slide3{
        background-image: url("../img/4.jpg");
    }
    .slide4{
        background-image: url("../img/5.jpg");
    }

## 重点js部分 ##

//封装一个函数，代替document.getElementById();
    function byId(id){
        return typeof id=="string"?document.getElementById(id):id;
    }
    //获取图片以及点击框对象的引用，全局变量
    var index=0,time,
        dots=byId("dots").getElementsByTagName("li"),
        pics=byId("banner").getElementsByTagName("div"),
        all=byId("all"),
        len=pics.length;
    //鼠标移动轮播图上触发onmouseover鼠标事件，此时会执行函数清除定时器，停止自动轮播。
    // 鼠标离开轮播图，定时器继续
    all.onmouseover=function(){
        if(time){
            clearInterval(time);
        }
    };
    //鼠标没有放在轮播图上，触发setInterval，每两秒自动执行一次换图
    all.onmouseout=function(){
        time=setInterval(function(){
            //循环图层，播放到最后一图，跳转到图一
                index++;
                if(index >= len){
                    index = 0;
                }
                //index为图片的索引值，0为第一张图，1为第二张图
                changeImg();
            },2000);
    };
    //记得调用，否则图片不会自动执行轮播，需要手动点击点击框，触发轮播
    all.onmouseout();
    //遍历所有点击框，且绑定点击事件，点击点击框则会跳转到相应的图片
    for(var b=0;b<len;b++){
        dots[b].id=b;
        //给所有的a添加id属性
        dots[b].onclick=function(){
            //因为作用域的问题，若在里面提取b则无法获取到相应的图片，通过id属性
            //触发点击事件，则可获取到某个点几款，触发了点击款事件，最后调用changImg更换到相应的图片
            index=this.id;
            changeImg();
        }
    }
    function changeImg() {
        //遍历所有图片，以及点击框
        for (var i=0;i<len;i++){
            //所有的图片获得display：none都将隐藏
            pics[i].style.display="none";
            dots[i].className="";
        }
        //根据index索引找到当前的div，并将它显示出来
            pics[index].style.display="block";
        //根据index索引找到当前的li,点击框的背景色缩着轮播图的变化，变化到相应的点击框
            dots[index].className="active";
    }

## 总结： ##

实现这样一个简单的轮播图，其实不是很难。只要指导思路，多多练习并不是难事。首先创建一个div，限制其高度宽度灯。设置overflow:hidden，position:relative,将每个图片都放进这个div里面，并给他们position:absolute。这样他们就全部装进了div里面。接着添加切换的图片的点击框按钮，使其可以手动点击切换。接着通过对象的引用，以及javascript鼠标点击事件，遍历所有图片，并找到相应的索引，完成切图的效果。

好了到此为止，一个简单易懂的简易轮播图就完成了。适合才学习完JavaScript基础的同学食用，简单易懂。若要实现更复杂的效果，欢迎关注我的博客。

[20190505224712772.gif]: /images/20220205/1abdb1ce6e984a26bb253b5e6b6587e9.png