简单轮播图实现

先在ul下的li标签放入五张

<div class="wrap">
        <ul class="list">
            <li class="item active">图1</li>
            <li class="item">图2</li>
            <li class="item">图3</li>
            <li class="item">图4</li>
            <li class="item">图5</li>
        </ul>
<div>

定义样式

.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;
        }

颜色代替不同图片，并让第一张默认居前

 .item:nth-child(1){
            background-color: black;
        }
        .item:nth-child(2){
            background-color: red;
        }
        .item:nth-child(3){
             background-color: gold;
         }
        .item:nth-child(4){
            background-color: green;
        }
        .item:nth-child(5){
             background-color: pink;
         }
         .item.active{			//居前的样式同时包含.item.active
            z-index: 10;
            opacity: 1;         /*不透明度100%*/
        }

同样的在wrap里添加点跟按钮

<ul class="pointList">
            <li class="point" 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>

样式

.btn{
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }
        #goPre{
             left: 0px;
         }
        #goNext{
            right: 0px;
        }
.pointList{             /*点的列表样式*/
            padding-left: 0;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
        }
        .point{             /*点的样式*/
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 100%;
            float: left;
            margin-left: 14px;
            border: solid rgba(255,255,255,0.6) 2px;
            cursor: pointer;        /*手指*/
        }
        .point.active{          /*点被选中状态*/
            background-color: rgba(255,255,255,0.4);
        }

样子如图

JavaScript

<script type="text/javascript">
        var item=document.getElementsByClassName("item");
        var goPreBtn=document.getElementById("goPre");
        var goNextBtn=document.getElementById("goNext");
        var points=document.getElementsByClassName('point');               //点的获取
        var index=0;            //表示第几张图片，第index图片有active这个类名
        //同时为第几个点

        var clearActive=function () {
            for (var i=0;i<item.length;i++){
                item[i].className="item";         //重定class规制都为item
                points[i].className="point";        //清除点
            }
        }

        var goIndex = function () {
            clearActive();          //重定class规制都为item跟point
            /*console.log(index);         //在console监视*/
            item[index].className="item active";            //展示第[index]张
            points[index].className="point active";         //展示第[index]点
        }

        var goNext=function () {
            if(index<4){
                index++;            //下一张
            }else {
                index=0;            //最后调回第一张[index=0]
            }
            goIndex();          //执行展示第[index+1]张
        }

        goNextBtn.addEventListener('click',function () {            //点击goNext触发的函数
            goNext();           //下一张
        })

        //同理上一张
        var goPre=function () {
            if(index>0){
                index--;            //上一张
            }else {
                index=4;            //最后调回最后一张[index=4]
            }
            goIndex();          //执行展示第[index+1]张
        }

        goPreBtn.addEventListener('click',function () {            //点击goPre触发的函数
            goPre();            //上一张
        })

        for(var i=0;i<points.length;i++){           //点击点事件
            points[i].addEventListener('click',function () {
                var pointIndex=this.getAttribute('data-index');
                /*console.log('pointIndex'); */           //console.log测试
                index=pointIndex;
                goIndex();
            })
        }
    </script>

添加定时器

setInterval(function () {		//	三秒跳转一次，
//不过当点击某个图片时可能发生：定时器时间到立马跳到下一张
                goNext();
        },3000)

优化定时器

var time=0;         //定义一个定时器参数

setInterval(function () {				//便于控制
            time++;
            if (time==30){
                goNext();			//3秒跳一次
            }
            if(time>30){
                time=0;				//重置time'接着上一个循环
            }
        },100)

//修改点击点事件，添加一行代码重置时间
 for(var i=0;i<points.length;i++){           //点击点事件
                points[i].addEventListener('click',function () {
                    var pointIndex=this.getAttribute('data-index');
                    /*console.log('pointIndex'); */           //console.log测试
                    index=pointIndex;
                    goIndex();
                    time=0;			//重置time'三秒后才能跳转
                })
            }