<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();
}