基础 - 网易的轮播图

<div id="box" class="box">
    <div id="show" class="show">
        <div id="showEx"class="showEx">
        </div>
    </div>
    <div id="order" class="order">
    </div>
</div>

 

* {
    margin: 0;
    padding: 0;
}
ul,
ol {
    list-style-type: none;
}
img {
    vertical-align: top;
}

.box {
    position: relative;
    width: 391px;
    margin: 100px auto;
    background:  url("") no-repeat left center;
    overflow: hidden;
}
.box .show {
    height: 220px;
    overflow: hidden;
    background:  url("") no-repeat left center;
}
.box .show .showEx {
    width:782px;
    height: 220px;
    background: url("") no-repeat left center;
}
.box .show .showEx .park {
    position: absolute;
    left: 0;
    top: 0;
}
.box .show .showEx .park a {
    display: block;
}
.box .show .showEx .park img {
    width: 391px;
}
.box .order {
    text-align: center;
    height: 30px;
    padding-top: 5px;
    background: #bee7c9 url("") no-repeat left top;
}
.box .order span{
    display: inline-block;
    width: 24px;
    height: 20px;
    background: url(http://img1.cache.netease.com/www/v2013/img/icon_v9.png) no-repeat center center;
    cursor: pointer;
}
.box .order .normal{
    margin: 0 5px;
    background-position: -24px -782px;
    text-indent: -999em;
    overflow: hidden;
}
.box .order .current{
    margin: 0 5px;
    background-position: -24px -762px;
}
.box .order .prev,
.box .order .next {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 30px;
    height: 35px;
}
.box .order .prev {
    left: 0;
    background-position: 6px 0;
}
.box .order .next {
    right: 0;
    background-position: 0 -44px;
}

 

function funId(sId) {
        return document.getElementById(sId);
    }

    var oBox = funId("box");
    var nDistance = oBox.clientWidth;
    var oShowEx = funId("showEx");
    var oOrder = funId("order");

    var data =  {"source":[
        {"src":"http://img4.imgtn.bdimg.com/it/u=2212792961,4232121819&fm=206&gp=0.jpg"},
        {"src":"http://img5.imgtn.bdimg.com/it/u=2226469571,517639788&fm=206&gp=0.jpg"},
        {"src":"http://img1.imgtn.bdimg.com/it/u=434734309,2626476282&fm=206&gp=0.jpg"},
        {"src":"http://img5.imgtn.bdimg.com/it/u=843361662,2562067877&fm=206&gp=0.jpg"},
        {"src":"http://img4.imgtn.bdimg.com/it/u=3375226293,1323610733&fm=206&gp=0.jpg"}
    ]};

    function funAdjustSpan(nIndex) {
        for(var i= 1,l=oOrder.children.length-1;i<l;i++) {
            oOrder.children[i].className = "normal";
        }
        oOrder.children[nIndex].className = "normal current";
    }

    var animateIndex = 0;
    function funPrev() {
        weAnimate(oShowEx.children[animateIndex],{left:nDistance});
        animateIndex=--animateIndex<0?oShowEx.children.length-1:animateIndex;
        oShowEx.children[animateIndex].style.left = -nDistance+"px";
        weAnimate(oShowEx.children[animateIndex],{left:0});
        funAdjustSpan(animateIndex+1);
    }
    function funNext() {
        weAnimate(oShowEx.children[animateIndex],{left:-nDistance});
        animateIndex=++animateIndex>oShowEx.children.length-1?0:animateIndex;
        oShowEx.children[animateIndex].style.left = nDistance+"px";
        weAnimate(oShowEx.children[animateIndex],{left:0});
        funAdjustSpan(animateIndex+1);
    }

    var JSON = data.source;
    for (var i = 0,l=JSON.length; i<l; i++) {
        var oDiv =  document.createElement("div");
        oDiv.className = "park";
        oDiv.style.left = nDistance + "px";
        oShowEx.appendChild(oDiv);
        var oA =  document.createElement("a");
        oA.href = "#";
        oDiv.appendChild(oA);
        var oImg =  document.createElement("img");
        for (var attr in JSON[i])      {
            oImg.src = JSON[i][attr];
        }
        oA.appendChild(oImg);
        var oSpan =  document.createElement("span");
        oSpan.className = "normal";
        oSpan.innerHTML = i+1;
        oOrder.appendChild(oSpan);
        oSpan.onclick = function () {
            var spanindex = this.innerHTML-1;
            if (spanindex==animateIndex) return;
            if (spanindex<animateIndex){
                weAnimate(oShowEx.children[animateIndex],{left:nDistance});
                oShowEx.children[spanindex].style.left = -nDistance+"px";
            }else{
                weAnimate(oShowEx.children[animateIndex],{left:-nDistance});
                oShowEx.children[spanindex].style.left = nDistance+"px";
            }
            weAnimate(oShowEx.children[spanindex],{left:0});
            animateIndex = spanindex;
            funAdjustSpan(animateIndex+1);
        }
        if(i==0) {
            oSpan.className = "normal current";
            oDiv.style.left = 0;
        }
    }

    var oNext =  document.createElement("span");
    oNext.className = "next";
    oOrder.appendChild(oNext);
    oNext.onclick = function () {
        funStart();
    }
    var oPrev =  document.createElement("span");
    oPrev.className = "prev";
    oOrder.insertBefore(oPrev,oOrder.children[0]);
    oPrev.onclick = function () {
        funPrev();
    }

    function funStop(){
        if (oBox.timer) clearInterval(oBox.timer);
    }
    function funStart(){
        funStop();
        oBox.timer = setInterval(function () {
            funNext();
        },2000);
    }
    funStart();
    oBox.onmouseover = function () {
        funStop();
    }
    oBox.onmouseout = function () {
        funStart();
    }