原生JS仿小米轮播图(最新版易懂)

原生JS仿小米轮播图(最新版易懂)

本次内容主要可实现的效果:

• 自动轮播
• 可点击上一张 下一张进行图片的切换
• 点击右下方小圆点进行图片切换

代码部分:

H5:

<div class="wrap">
        <ul class="list">
            <li class="item active"><img src="img/001.jpg" alt=""></li>
            <li class="item"><img  src="img/002.jpg"" alt=""></li>
            <li class="item"><img src="img/001.jpg" alt=""></li>
            <li class="item"><img src="img/002.jpg" alt=""></li>
            <li class="item"><img src="img/001.jpg" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ul class="pointList">
            <li class="point active" data-index="0"></li>
            <li class="point" data-index="1"></li>
            <li class="point"data-index="2"></li>
            <li class="point"data-index="3"></li>
            <li class="point"data-index="4"></li>
        </ul>
        <button type="button" class="btn" id="goPre"><</button>
        <button type="button" class="btn" id="goNext">></button>
    </div>

CSS部分:

<style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0px;
        }

        .item {
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            opacity: 0.6;
            transform: all .8s;
        }
        .item img{
            width: 800px;
            height: 400px;
        }
        .btn {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }

        #goPre {
            left: 0px;
        }

        #goNext {
            right: 0px;
        }

        .item.active {
            opacity: 1;
            z-index: 10;
        }

        .pointList{
            padding-left: 0;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
        }
        .point{
            width: 10px;
            height: 10px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 50%;
            float: left;
            margin-right: 16px;
            border-style: solid;
            border-width: 2px;
            border-color: rgba(255,255,255, 0.6);
            cursor: pointer;
        }
        .point.active{
            background-color: rgba(255,255,255,0.4);
        }
    </style>

JS部分

 <script>
        //获取节点
        var items = document.getElementsByClassName('item')//图片
        var goPreBtn = document.getElementById('goPre');
        var goNextBtn = document.getElementById('goNext');
        //获取点
        var points=document.getElementsByClassName('point');

      var time=0;//定时器图片跳转参数

        var index = 0; //表示第几张图片在展示
        //可以展示第几个点

        var clearActive=function(){
            for(var i=0;i<items.length;i++){
                items[i].className='item';
                points[i].className='point';
            }
        }

        var goIndex=function(){
           clearActive();
            items[index].className='item active';
            points[index].className='point active';
        }

        var goNext=function(){
            if(index<4){
                index++;
            }else{
                index=0;
            }
            goIndex();
        }
        var goPre=function(){
            if(index==0){
                index=4;
            }else{
                index--;
            }
            goIndex();
        }

        //点击下一张切换图片
        goNextBtn.addEventListener('click' ,function(){
            goNext();
            time=0;
        })
	   //点击上一张进行切换图片
        goPreBtn.addEventListener('click' ,function(){
            goPre();
            time=0;
        })

      for(var i=0;i<points.length;i++){
        points[i].addEventListener('click',function(){
            var pointIndex=this.getAttribute('data-index');
            index=pointIndex;
            goIndex();
            time=0;
        })
      }
      
    //自动轮播定时器
    setInterval(function(){
        time++;
        if(time==20){
            goNext();
            time=0;
        } 
    },100)
    </script>