javascript简单轮播图

**轮播图实现原理：
通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**

HTML布局和内容：
1.容器container存放子容器，子容器lis的a标签存在图片。
2.子容器tips存放按钮小圆点。

<div id="container">
        <div id="lis">
            <a href="#"><img src="img/B1.jpg" alt=""></a>
            <a href="#"><img src="img/B2.jpg" alt=""></a>
            <a href="#"><img src="img/B3.jpg" alt=""></a>
            <a href="#"><img src="img/B4.jpg" alt=""></a>
            <a href="#"><img src="img/B5.jpg" alt=""></a>
        </div>
        <!-- 图片下面的那一排小圆点 到时候用JS动态输出-->
        <ul id="tips">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 左右按钮 -->
        <div id="btn">
            <a href="#" id="up">&lt;</a>
            <a href="#" id="next">&gt;</a>
        </div>
  </div>

CSS样式：
1.注意container的overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。
2.CSS3:after伪元素清除浮动，利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
3.小圆点无论多少都要居中，CSS3:position & transform: translate(-50%) 实现块元素百分比下居中。

<style>
    /* 容器的高 宽 相对定位 超出隐藏*/
    #container{
        width:800px;
        height:400px;
        margin: 0 auto;
        position:relative;
         overflow:hidden;
    }
    /************************ 内容的高 宽 绝对定位 偏移************************/
    #lis{
        width: 4000px;
        height: 400px;
        position:absolute;
        left:0;
    }
    #lis a{
    float:left;
    }
    /* 清除img浮动,正常撑开a高与高 */
    #lis a:after{
        content:"";
        display:block;
        clear:both;
    }
    /* 清除IMG之间边距 无缝拼接 */
    #list img{
     float:left;
    }

/******* 一排小圆点************/
    #tips{
        margin:0;
        padding:0;
        z-index:999;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        list-style:none;

    }
    #tips li{
            width:18px;
            height: 18px;
            border-radius:50%;
            background:#333;
            float:left;
            margin-left:5px;
    }
    /* 切换到相应的图片 相应小圆点的颜色 */
    #tips .active{
        background:red;
    }
     /**** 左右按钮 绝对定位 大小 去下划线****************/
    #btn a{
        position:absolute;
        top:50%;
        margin-top:-100px;
        font-size:100px;
        text-decoration: none;
    }
    #btn #next{
    position:absolute;
    right:0%;

    }
  </style>

静态的效果图了！

JavaScript部分
1.查找要触发的元素左右箭头！
2.创建事件当点击时改变偏移的值。
3.判断偏移值是否内容（#lis）的width;
4.设置自动轮播事件，制作定时器timer setInterval()执行多次!
5.设置暂停轮播事件,clearInterval(timer);//移除定时器!
6.鼠标移出onmouseout 移入onmouseover轮播图区域执行自动和暂停轮播事件
7.设置圆点和相应图片同步切换的事件，点击圆点切换图片 有闭包的知识！

---

      <script>
        var next=document.getElementById("next");//查找一个叫next id;
        var up=document.getElementById("up");//查找一个叫up id;
        var lis=document.getElementById("lis");//查找一个叫lis id;
        var imgCount=lis.getElementsByTagName("img");//查找lis所有图片;
        var countMove=imgCount.length*-800;//定义变量用保存偏移的总值;
        var container=document.getElementById("container");//获取整个轮播图区域
        var ul=document.getElementById("tips");//查找一个叫tips id;
        var list=ul.getElementsByTagName("li");//查找ul全部圆点
        var timer;
        var index=0;//list下标 从0开始！
        console.log(lis.width);
        var move=0;//定义变量用保存偏移的值;
        //设置next下一张点击事件
        2.
        next.onclick=function(){
            move-=800;//每点击一次偏移-800PX; 第一张图后style.left都为负值。
            index+=1;
            if(move===countMove){//如果偏移（move）等于countMove(4000),就move为0（0是第一张）
                move=0;
                index=0;
            }
            lis.style.left=move+"px";//设置向偏移left:move
            circle();//切换相对应圆点
        }
        //设置up上一张点击事件
        up.onclick=function(){
            index-=1;
            if(move===0){ //如果偏移（move）等于0,就move为countMove(4000);
                move=countMove;
                index=list.length-1;
            }
            move+=800;
            lis.style.left=move+"px";//设置向偏移left:move
            circle();//切换相对应圆点
        }
        //设置轮播事件
        function play(){
            timer=setInterval(function(){ //内置定时器多次执行
                next.onclick();//每1.5秒执行下一张事件！！
            },1500)
        }

        play();//加载JS自动轮播！
        //设置暂停轮播事件
        function stop(){
            clearInterval(timer);//移除定时器
        }
        container.onmouseout=play;//当鼠标移出轮播图区域执行自动轮播事件
        container.onmouseover=stop;//当鼠标移入轮播图区域执行暂停轮播事件
        //设置圆点和图片同步切换的事件
        function circle(){
            for(var i=0; list.length>i;i++){//for循环语句 循环所有圆点
             if(list[i].className=="active"){ //if条件语句 如果其中一个圆点的Class等于active
                 list[i].className="";          //其他圆点就是Class设置为空
              }
                list[index].className="active";//list下标为index 设置Calss为cative;
            }
        }
        for(var i=0; list.length>i;i++){ //for循环语句 循环所有圆点
            (function(i){  //闭包
                list[i].onclick=function(){ //圆点点击事件
                       lis.style.left=i*-800+"px";//设置lis偏移的值
                        index=i;
                        circle();
                }
            })(i);    //传入I
        }

    </script>

---

我是初学者：
借鉴于前辈的博客：http://www.cnblogs.com/LIUYAN...