轮播图在网页中随处可见，几乎所有的大大小小的网站都有各式各样的轮播图，今天本渣渣在这里为小白们做一个最简单的轮播图效果。当然,还是比较实用的。
1.思路
对于js特效，有一个正确的思路，事情就成功的了一半，剩下的一半就是代码加调试。
1.1、目的：
明确你要做一个什么样的轮播图，是一直从右向左的无缝滚动，还是一张又一张淡入淡出，还是，一张又一张的从右向左逐张滑动出现等等等（这几种轮播图都会在下几篇轮播图系列一个个介绍），明确下来之后就开始造！轮！子！
1.2、思路：
（1）html的布局:
首先来个最外层容器，往里面放两个子元素，一个是用来放图片，另一个自然是放焦点；
（2）css样式设置
最外层的容器添加上相对定位，里面的放图片的容器用相对定位，里面的每个图片元素或者放图片的元素都用绝对定位，并且top和left属性值都为‘0’。
放焦点的容器用绝对定位，防止出现叠放元素引起的覆盖，也是为了让焦点能更好控制布局，（注意：焦点一定要用"display:inline-block"，这样是为了让焦点都能自动居中，他的父级元素当然要有"text-align:center"，这样可以让不管有多少个焦点都能自动让焦点居中，为了好看嘛）
（3）js部分
实现得准备工作，用js创建相应个数的焦点（这个我认为很有必要）,然后就是用排他思想（先设置所有同类元素，再设置其中某一个使其不同于其他同类元素），和选项卡的思想一样，利用全局变量，定时器循环播放，so easy！代码中穿插相对详细备注说明
2.代码
2.1html代码
先来摆上要用的html代码，下面的css和js都要围绕html展开的
<div class="banner" id="banner1">
<ul id="img" class="img">
<li class="on"><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
<li><img src="./img/4.jpg"></li>
</ul>
<ul id="order" class="order">
<!--
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
-->
</ul>
</div>
2.2 css样式
工欲善其事必先利其器。首先布局得合理，必须得合理，绝对定位一定要有，当然，被赋予绝对定位元素的父级元素得有相对定位。（和二级菜单的相对套绝对是一样的道理），要不然你的页面就会乱掉。
*{
padding:0;
margin:0;
list-style: none;
font-family: "微软雅黑";
outline: none;
}
.banner{
width:720px;
height:480px;
margin:50px auto;
position:relative;
}
.img>li{
position:absolute;
transition: all 1s ease;
opacity:0;
}
.order{
width:100%;
position:absolute;
top:430px;
text-align: center;
}
.order li{
display:inline-block;
width:20px;
height:20px;
background: white;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
}
#img .on{
display:block;
opacity:1;
}
#order .on{
background: chocolate;
}
2.3 高端大气的js部分（请允许装个X）
var banner = document.getElementById('banner');
var img = document.getElementById('img');
var lis = img.getElementsByTagName('li');
var order = document.getElementById('order');
//根据上面图片的数量创建相应个数的焦点
for(i=0;i<lis.length;i++){
var creLi = document.createElement('li');
order.appendChild(creLi);
}
//获取焦点事件源，并将第一个添加类（class="on"）
var orderLis = order.getElementsByTagName('li');
orderLis[0].className = 'on';
//前期准备工作结束，开始正式的主要部分，让它动起来
var num = 0;
var xh = null;
function play(num){
for(i=0;i<lis.length;i++){
lis[i].className = '';
orderLis[i].className = '';
}
lis[num].className = 'on';
orderLis[num].className = 'on';
}
//自动播放
function autoPlay(){
xh = setInterval(function(){
num++;
if(num >= lis.length){
num = 0;
}
play(num);
console.log(num);
},1000);
}
autoPlay();
//添加鼠标移入暂停，移出继续轮播事件
banner.onmouseover = function(){
clearInterval(xh);
xh = null;
}
banner.onmouseout = function(){
autoPlay();
}
//给焦点添加实时监控事件，鼠标移到哪个焦点，就显示那个对应的图片
for(i=0;i<orderLis.length;i++){
//万物皆对象，遍历出的所有orderLis都是一个个单独的对象，给每个orderLis添加index属性，利用它记忆每个orderLis自己的索引号
orderLis[i].index = i;
orderLis[i].onmouseover = function(){
//让全局变量num等于此时显示的图片的索引号，防止鼠标离开后继续播放不正常的事情发生
num = this.index;
play(this.index);
}
}
3、完工
是不是so easy 觉得不够好的自行优化一下，这里不再做过多的赘述，以后几篇会介绍如何优化，使其体验更好
