<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="chixiang"/>
<title>love is like</title>
<style type="text/css">
*{ margin:0; padding:0; border:none;}
body, ul, li{ margin:0; padding:0; }
ul, li { list-style:none;}
#slider {overflow:hidden;margin:0px auto;height:250px;width:700px;}
#slider li{float:left;}
#slider li a{display:block;_overflow:hidden;}
</style>
</head>
<body>
<div id="box">
<ul id="slider">
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/01.jpg" width="440" height="250"></a></li>
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/02.jpg" width="440" height="250"></a></li>
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/03.jpg" width="440" height="250"></a></li>
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/04.jpg" width="440" height="250"></a></li>
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/05.jpg" width="440" height="250"></a></li>
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/06.jpg" width="440" height="250"></a></li>
<li><a href="#" target="_blank"><img src="http://www1.pconline.com.cn/alex/try/slider/images/07.jpg" width="440" height="250"></a></li>
</ul>
</div>
<script type="text/javascript">
function int(obj){
this.o = document.getElementById(obj);
this.aImg = this.o.getElementsByTagName("a");
this.allWidth = parseInt(this.o.offsetWidth);
this.imgNum = this.o.getElementsByTagName("a").length;
this.startWidth =this.allWidth/this.imgNum;
this.endWidth = parseInt(this.o.getElementsByTagName("img")[0].offsetWidth);
this.moving = (this.imgNum*this.startWidth - this.endWidth)/(this.imgNum-1);
this.Slide(this.o,this.imgNum,this.aImg,this.startWidth,this.endWidth,this.moving,this.run);
};
int.prototype.run = function(srcObj, targetPos, count){
this.timer = 10;
var currentCount = 0;
count = Math.abs(count) || 1;
var initPos = parseInt(srcObj.offsetWidth);
var Func = function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;};
if(srcObj.flag){
clearInterval(srcObj.flag);
}
srcObj.flag = setInterval(function() {
if (currentCount > count) {
clearInterval(this.flag);
}
else {
currentCount++;
var tmpWidth = Func(initPos,targetPos, currentCount, count);
srcObj.style.width = tmpWidth + "px";
if (Math.abs(tmpWidth - targetPos) < 1) {
srcObj.style.width = targetPos + "px";
}
}
}
, this.timer);
};
int.prototype.Slide = function(o,imgNum,aImg,startWidth,endWidth,moving,run){
for(var i=0; i<imgNum;i++){
aImg[i].style.width =startWidth+'px';
(function(x){
aImg[x].onmouseover = function(){
for(var f = 0 ; f<imgNum;f++){
if(f == x){
run(aImg[x],endWidth-5,30);
continue
};
run(aImg[f],moving,30);
};
};
o.onmouseout = function(){
for(var y =0;y<imgNum;y++){
run(aImg[y],startWidth-2,30);
};
};
})(i);
};
};
new int("slider")
</script>
</body>
</html>
