autoplay

autoplay.js

var $ = function (id) {
return typeof id === "string" ?
document.getElementById(id):id;
};
var $$ = function (tagName,oParent) {
return (oParent || document).getElementsByTagName
(tagName);
};
var Autoplay = function(id){
this.initalize(id);
};
Autoplay.prototype = {
initalize:function (id) {
var oThis = this;
this.oBox = $(id);
this.oUL = $$("ul",this.oBox)[0];
this.aImg = $$("img",this.oBox);
this.timer = null;
this.autoTimer = null;
this.iNow = 0;
this.creatBtn();
this.aBtn =$$("Li",this.oCount);
this.toggle();
this.autoTimer = setInterval(function () {
oThis.next();
},3000);
this.oBox.onmouseover = function () {
clearInterval(oThis.autoTimer);
};
this.oBox.onmouseout = function () {
oThis.autoTimer = setInterval(function () {
oThis.next();
},3000);
};
for (var i = 0; i<this.aBtn.length;i++)
{
this.aBtn[i].index = i;
this.aBtn[i].onmouseover = function () {
oThis.iNow = this.index;
oThis.toggle();
};
}
}
creatBtn:function () {
this.oCount = document.createElement("ul");
this.oFrag = document.createDocumentFragment();
this.oCount.className = "count";
for(var i = 0; i< this.aImg.length;i++){
var oLi = document.createElement("Li");
oLi.innerHTML = i+1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
toggle:function () {
for (var i = 0; i < this.aBtn.length; i++)
this.aBtn[i].className = "";
this.aBtn[this.iNow].className = "current";
this.doMove(-(this.iNow* this.aImg
[0].offsetHeight));
},
next:function () {
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle();
},
doMove:function (iTarget) {
var oThis = this;
clearInterval(oThis.timer);
oThis.timer = setInterval(function () {
var iSpeed = (iTarget - oThis.oUL.offsetTop)/5;
iSpeed = iSpeed > 0? Math.ceil(iSpeed) :
Math.floor(iSpeed);
oThis.oUL.offsetTop == iTarget ?
clearInterval(oThis.timer) : (oThis.oUL.style.top =
oThis.oUL.offsetTop + iSpeed + "px");
},30);
}
};window.onload = function () {
new Autoplay("box_autoplay")
};

autoplay.css
body, div, ul, li {
margin: 0;
padding: 0;
}

ul {
list-style-type: none;
}

body {
background: #000000;
text-align: center;
font: 12px/20px Arial;
}

#box_autoplay {
position: relative;
width: 900px;
height: 335px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
cursor: pointer;
}

#box_autoplay .list {
position: relative;
width: 900px;
height: 335px;
overflow: hidden;
}

#box_autoplay .list ul {
position: absolute;
top: 0;
left: 0;
}

#box_autoplay .list li {
width: 900px;
height: 335px;
overflow: hidden;
}

#box_autoplay .count {
position: absolute;
right: 0;
bottom: 5px;
}

#box_autoplay .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #f90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}

#box_autoplay .count li.current {
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
font-weight: 700;
background: #f60;
}

#tmp {
width: 100px;
height: 100px;
background: red;
position: absolute;
}