js手撕轮播图！(最简单版面试用)

1.html

页面展示区为wrap，里面第一部分是大图，第二部分是索引点，第三部分是向前向后按钮。

<div class="wrap">
    <ul class="list">
        <li class="item active"><img src="./images/images/1.jpg"></li>
        <li class="item"><img src="./images/images/2.jpg"></li>
        <li class="item"><img src="./images/images/3.jpg"></li>
        <li class="item"><img src="./images/images/4.jpg"></li>
        <li class="item"><img src="./images/images/5.jpg"></li>
    </ul>
    <ul class="pointList">
        <li class="point active"></li>
        <li class="point"></li>
        <li class="point"></li>
        <li class="point"></li>
        <li class="point"></li>
    </ul>
    <button class="button prev"><</button>
    <button class="button next">></button>
</div>

2.css

布局：让五张照片叠在一起。

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: content-box;
        }
        .wrap {
            position: relative;
            width: 400px;
            height: 320px;
        }
        .list {
            width: 400px;
            height: 320px;
            list-style: none;
            position: relative;
        }
        .item {
            width: 400px;
            position: absolute;
        }   /*五张照片叠在一起。*/

        .button {
            width: 20px;
            height: 40px;
            position: absolute;
            top: 140px;
            z-index: 100; /*按钮显示优先级最高*/
            opacity: 0;
        }
        .prev {
            left: 5px;
        }
        .next {
            right: 5px;
        }
        .item.active {
            z-index: 10;   /*哪张图片被加了active，哪张图片的显示优先级最高。*/
        }
        .pointList {
            list-style: none;
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 30;  /*要设置z-index，否则默认为0，显示不出来。*/
        }
        .point{
            width: 20px;
            height: 20px;
            background-color: darkred;
            border-radius: 50%;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }
        .point.active {
            background-color: red;
        }
    </style>

3.js

原理：给哪张图片添加类active，哪张图片就在最上面。（设置z-index）

<script>
        window.onload = function(){
            //1.获取元素
            var wrap = document.getElementsByClassName('wrap')[0];
            var items = document.getElementsByClassName('item');
            var prev = document.getElementsByClassName('prev')[0];
            var next = document.getElementsByClassName('next')[0];
            var pointList = document.getElementsByClassName('pointList')[0];
            var points = pointList.getElementsByClassName('point');

           /*2.按钮控制的向左向右*/   
           /*整个逻辑主要是在操作index*/
            var index= 0;  /*index表示第几张图片在展示。*/
            var clearActive = function(){
                for(var i = 0;i<items.length;i++)
                {
                    items[i].className = 'item';
                    points[i].className = 'point'; /*先清除掉所有的active*/
                }
            };
            var goIndex = function (){
                clearActive();
                items[index].className = 'item active';/*设置第index张图片有active这个类名。*/
                points[index].className = 'point active';/*设置第index个索引点有active这个类名*/
            };

            var goNext = function(){
                if(index >= 4)
                {
                    index = 0
                }else{
                    index++;
                }
                goIndex();
            };
            var goPrev = function(){
                if(index <= 0)
                {
                    index = 4
                }else{
                    index--;
                }
                goIndex();
            };
            next.onclick = function(){
                goNext();
            };
            prev.onclick = function(){
                goPrev();
            };

            /*3.索引点控制的轮播图*/
            for(var i=0; i<points.length;i++)
            {
                points[i].index = i;/*给point[i]一个index属性，表示索引点对应的图片的index*/
                points[i].onmouseover = function(){
                    index = this.index;
                    goIndex();
                }
            }
           /*4.定时器控制的轮播图*/
            var timer;
            var autoSlide = function() {
                timer = setInterval(function(){
                    goNext();
                },2000)
            };
            autoSlide();

            wrap.onmouseover = function(){
                clearInterval(timer);
                prev.style.opacity = '1';
                next.style.opacity = '1';
            };
            wrap.onmouseout = function(){
                autoSlide();
                prev.style.opacity = '0';
                next.style.opacity = '0';
            }
        }
    </script>