Js-焦点轮播图

• HTML部分：

<div class="all" id="all">
    <div class="top">
        <div class="main" id="main">
            <div class="main-img">
                <a href="">
                    ![](../images/1.jpeg)
                </a>
            </div>
            <div class="main-img">
                <a href="">
                    ![](../images/2.jpeg)
                </a>
            </div>
            <div class="main-img">
                <a href="">
                    ![](../images/3.jpeg)
                </a>
            </div>
            <div class="main-img">
                <a href="">
                    ![](../images/4.jpeg)
                </a>
            </div>
            <div class="main-img">
                <a href="">
                    ![](../images/5.jpeg)
                </a>
            </div>
            <div class="main-img">
                <a href="">
                    ![](../images/6.jpeg)
                </a>
            </div>
        </div>
    </div>
    <div class="bottom" id="bottom">
        <span id="left" class="left"></span>
        <!--<span class="icon"></span>-->
        <!--<span class="icon"></span>-->
        <!--<span class="icon"></span>-->
        <!--<span class="icon"></span>-->
        <!--<span class="icon"></span>-->
        <!--<span class="icon"></span>-->
        <span id="right" class="right"></span>
    </div>
</div>

• CSS部分：

 *{
       margin:0;
       padding:0;
       border:none;
       }
        .all{
            width: 310px;
            height: 260px;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }
        .top{
            width: 310px;
            height: 220px;
        }
        .main-img{
            position: absolute;
            width: 310px;
            height: 220px;
        }
        .main-img img{
            width: 100%;
            height: 100%;
        }
        .bottom{
            text-align: center;
        }
        .left,.right{
            width: 20px;
            height: 34px;
            position: absolute;
            top:50%;
            margin-top: -34px;
            background: url(../images/icon.png);
        }
        .left{
            background-position:0 0;
            left: 0;
        }
        .right{
            background-position:-9px -45px;
            right: 0;
        }
        .icon{
            width: 20px;
            height: 5px;
            background: url(../images/icon.png) -24px -790px;
            display: inline-block;
            margin:5px;
            text-indent: 20em;
        }
       .curr{
           background-position: 0 -770px;
       }

• JS部分：

 window.onload = function () {
        var all = document.getElementById('all');
        var main = document.getElementById('main');
        var bottom = document.getElementById('bottom');
        var pics = main.children;
        var allW = all.offsetWidth;
        var iNow = 0 ;
        //动态添加span
        for(var i=0;i<pics.length;i++){
            var mySpan = document.createElement("span");
            mySpan.className = "icon";
            mySpan.innerHTML = pics.length-i;
            bottom.insertBefore(mySpan,bottom.children[1])
        }
        bottom.children[1].className = "icon curr";
        for(var i=1;i<pics.length;i++){
            pics[i].style.left =allW + "px";
        }
        for(var i=0;i< bottom.children.length;i++){
            var mySpan = bottom.children[i];
            mySpan.onclick = function () {
                if(this.className == "left"){
                buffer(pics[iNow],{left:allW});
                    iNow--;
//                    alert(iNow);
                    if(iNow<0){
                        iNow = pics.length-1;
                    }
                    pics[iNow].style.left = -allW+"px";
                    buffer(pics[iNow],{left:0})
                }
                else if(this.className == "right"){
                    buffer(pics[iNow],{left:-allW});
                    iNow++;
                    if(iNow>pics.length-1){
                        iNow = 0;
                    }
                    pics[iNow].style.left = allW+"px";
                    buffer(pics[iNow],{left:0})
                }
 else{
                        var index = this.innerHTML -1;
                    if(index>iNow){
                        buffer(pics[iNow], {left: -allW});
                        iNow = index;
                        pics[iNow].style.left = allW+"px";
                        buffer(pics[iNow],{left:0})
                    }else if(index<iNow){
                        buffer(pics[iNow], {left: allW});
                        iNow = index;
                        pics[iNow].style.left = -allW+"px";
                        buffer(pics[iNow],{left:0})
                    }
                }
            change();
            }
        }
//排他思想变span的颜色
function change(){
    for(var i= 1;i<bottom.children.length-1;i++){
        bottom.children[i].className = "icon";
    }
    //小span的角标是从1开始的所以记录当前显示第几章图片的iNow需要加1//
bottom.children[iNow+1].className = "icon curr";
}
        //用定时自动循环
        var  timer = setInterval(go,1000)
        function go(){
            //自动循环就是相当于点击了右键
            buffer(pics[iNow],{left:-allW});
            iNow++;
            if(iNow>pics.length-1){
                iNow = 0;
            }
            pics[iNow].style.left = allW+"px";
            buffer(pics[iNow],{left:0})
            //调用排他思想变换颜色的函数
            change();
        }
        //当移动到slider上的时候停止定时器，移开的时候开启定时器//
        all.onmouseover = function () {
            clearInterval(timer);
        }
        all.onmouseout = function () {
            timer = setInterval(go,1000);
        }

    }

• 动画封装到了JS里面，需要用js库。

<script src="../MyFn.js"></script>