轮播图（1）——原生js淡入淡出

轮播图在网页中随处可见，几乎所有的大大小小的网站都有各式各样的轮播图，今天本渣渣在这里为小白们做一个最简单的轮播图效果。当然,还是比较实用的。

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 觉得不够好的自行优化一下，这里不再做过多的赘述，以后几篇会介绍如何优化，使其体验更好

4、在线演示

在线演示