怎么使用原生JavaScript改成轮播图

Question

HTML代码如下

<!-- 轮播图 -->
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="wrap">
            <a href="#" class="arrow-l"> < </a>
            <a href="#" class="arrow-r"> > </a>
            <ul>
                <li>
                    <a href="#"> <img src="img/t8.jpg" > </a>
                </li>
            </ul>
            <ol class="circle">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>
    </div>
</div>

CSS代码如下

.wrap{
    position: relative;
    margin: 30px auto;
    height: auto;
}
.wrap ul{
    height: auto;
}
.wrap ul li a{
    display: block;
}
.wrap ul li a img{
    width: 100%;
}
.arrow-l,
.arrow-r{
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 18px;
    border: 1px solid #000000;
    padding: 5px;
    background: rgba(0,0,0,.6);
}
.arrow-r{
    right: 0;
}
.circle{
    position: absolute;
    left: 50%;
    bottom: 10px;
}
.circle li{
    float: left;
    width: 15px;
    height: 15px;
    list-style: none;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    margin: 0 9px;
    cursor: pointer;
    background: #fff;
}
.circle .on{
    background-color: orange;
}

Answer 1

把图片放到数组里面，通过单击事件改变数组下标。