原生JS写一个轮播图

做一件事之前，一定要知道怎么做所以先写思路：

1.把图和下面的角标先画上去，静态页面要先完成。

2.写JS

哈哈是不是太简单了〜别急。

那么静态页面怎么才算完成呢，轮播图首先得把这几个图片排成一排，这就用到了浮动。

具体实现如下：

先写一个大的DIV，里面包含一个UL，李来存放图片。

外层的DIV设置现在的位置为相对;溢出：隐藏;内层UL设置现在的位置为绝对的，且UL的宽度设置的宽一点，不然图片很多的话你排不到一排。

OL为下面的角标，为了能让OL随着图片的数量自动生成，我们用JS来生成元素，只在CSS样式控制即可。实现完是这个样子的

下面写JS的实现思路。

首先，我们先想一个问题，当轮播到最后一张的时候，再切换到第一张会有什么问题，有一段空白，避免这个问题就是再克隆第一张图放在最后，仔细想想这段得通。

好了，开始正式内容，首先我得知道有几张图，为了生成角标，然后我还得知道图的宽度，准备移动的时候设置距离。记得把第一张图克隆放到第四张后面。

怎么做呢，设置定时器，开始自动轮播，定时器函数运行一次计算一个关键值，用来记，到第几张图了，相应的，下角标跟着变化样式，当然，每次设置左： - key * liWidth，然后设置变化的动画函数。

实现如下：

HTML

<div class="imgActive" id="scroll">
<ul class="swiper clearfix" id="ul">
<li class="fl"><img src="../images/优益生活.png"></li>
<li class="fl"><img src="../images/双立人.png"></li>
<li class="fl"><img src="../images/大嘴猴.png"></li>
<li class="fl"><img src="../images/飞科.png"></li>
</ul>
<!-- <ol class="numSwiper clearfix">
<li class="activeColor fl">1</li>
<li class="fl">2</li>
<li class="fl">3</li>
<li class="fl">4</li>
</ol> -->

</div>

JS

/*原生JS实现轮播图*/
var scroll = document.getElementById('scroll');
var ul =  document.getElementById('ul');
var listNum = ul.children.length;//获取有几张图片
// console.log(listNum);
var liWidth = ul.children[0].offsetWidth;//获取每个li的宽度
console.log(liWidth);
ul.appendChild(ul.children[0].cloneNode(true));//cloneNode参数true或者false，true为克隆所有，false不克隆属性。


//创建ol
var ol = document.createElement("ol");
scroll.appendChild(ol);//放在ul后面
for(i=0 ;i<listNum;i++){
var li = document.createElement("li");
li.innerHTML = i+1;
ol.appendChild(li);
}
ol.children[0].className="activeColor";


// 创建 动画函数
function animate(el,target){
//清除定时器
clearInterval(el.timer);
var speed = (el.offsetLeft<target)? 15 : -15;
el.timer = setInterval(function(){
var result = target -el.offsetLeft;
el.style.left = el.offsetLeft+speed+'px';
//有可能是小数
if(Math.abs(result)<=Math.abs(speed)){
clearInterval(el.timer);
el.style.left = target+'px';
}
},10);
}
//定时器函数
var timer =null;//轮播图的定时器
var key = 0;//控制播放张数
var cicle = 0;//控制小圆点
timer = setInterval(autoplay,2000);//自动轮播
function autoplay(){
key++;//先加，当大于总图片总数时，是第六张，迅速转回第一张
if(key>listNum){
ul.style.left = 0;
key = 1;
}
animate(ul,-key*liWidth);
cicle++;
if(cicle>listNum-1){
cicle = 0;
}
for(i=0;i<listNum;i++){
ol.children[i].className="";
}
ol.children[cicle].className="activeColor";
}

CSS

/*原生JS实现轮播图*/
.imgActive{overflow: hidden;width:370px; position: relative;height: 257px;margin: 50px auto;}
.imgActive .swiper{position: absolute;left: 0;top: 0;width: 600%;}
.imgActive ol{position: absolute;right: 0;bottom: 10px;clear: both;}
.imgActive ol li{float: left; width: 20px;height: 20px;border-radius: 50%;background: white;text-align: center;margin-right: 10px;cursor: pointer;}
.imgActive ol .activeColor{background: red;}