【记录】仅仅是复习下这个效果
原文地址：博客园IDCHE
很久以前写个这东西还很吃力。现在也变得那么容易了。进步了呵呵。仅仅是用博客记录一下。
1----------------------------------------------------------------------------------------------------
<!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" />
<title>无标题文档</title>
<style type="text/css">
ul,li{ margin:0; padding:0;}
ul{ list-style:none;}
.pic_box{width:610px;height:205px; overflow:hidden; position:relative;}
.show_pic{width:5000px;}
.show_pic li{float:left;}
.icon_num{position:absolute; bottom:10px; right:10px;filter:alpha(opacity=80);opacity:.8}
.icon_num li{float:left; margin:0 5px;}
.show_pic li img{ display:block;}
.icon_num li a{ display:block; line-height:1.5em; padding:0 10px; text-decoration:none; background:#eee;}
.icon_num .on a{background:#ccc;}
</style>
</head>
<body>
<div class="pic_box">
<ul class="show_pic" id="photo">
<li><img title="#" src="http://inncache.soso.com/pc/images/manage.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/player.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/py.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/xf.jpg" alt="#" width="610" height="205" /></li>
<li><img title="#" src="http://inncache.soso.com/pc/images/TT.jpg" alt="#" width="610" height="205" /></li>
</ul>
<ul class="icon_num" id="btnList">
<li class="on"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<script type="text/javascript">
(function(){
function $(id){
return document.getElementById(id);
}
var Slide = function(){
this.config = {};
var self = this,
config = self.config;
config.interval = null;
config.auto = null;
config.index = 0;
config.speed = 300; // 速度
config.elem = $('photo'); // 变化的HTMLElement
config.btnArr = $('btnList').getElementsByTagName('li'); //
self.init();
}
Slide.prototype = {
init:function(){
var self = this,
config = self.config,
btnArr = config.btnArr,
len = btnArr.length,
i = 0;
for(; i<len; i++){
btnArr[i].onmouseover = (function(i){
return function(){
self.stop();
self.go(i);
}
})(i)
};
config.elem.onmouseover = function(){
self.stop.apply(self);
};
config.elem.onmouseout = function(){
self.play.apply(self);
};
},
tween:function(t, b, c, d){ return - c * (t /= d) * (t - 2) + b},
getStyle:function(a, b, c){
if(window.getComputedStyle){
b = b.replace(/([A-Z])/g, "-$1");
b = b.toLowerCase();
return window.getComputedStyle(a, null).getPropertyValue(b);
}else{
if (a.currentStyle) {
if (b == "opacity") return a.style.filter.indexOf("opacity=") >= 0 ? parseFloat(a.style.filter.match(/opacity=([^)]*)/)[1]) / 100 : "1";
return a.currentStyle[b]
}
}
},
animate:function(elem, style, val, time, px, fn){
var self = this;
var px = px || 'px';
var time = time || 300;
var b = parseFloat(self.getStyle(elem, style));
var st = new Date().getTime();
var a = setInterval(function(){
var t = new Date().getTime() - st;
if( t > time){t = time;clearInterval(a);fn&&fn();}
elem.style[style] = parseInt(self.tween(t, b, val, time)) + px;
}, 10);
return a;
},
stop:function(){
var self = this;
self.clear(self.config.auto);
},
clear:function(a){
a && clearInterval(a);
},
transform:function(val, callBack){
var self = this,
config = self.config;
self.clear(config.interval);
config.interval = self.animate(config.elem, 'marginLeft', val, config.speed, 'px', callBack);
},
go:function(index){
var self = this,
config = self.config,
val = -610;
self.clear(config.interval);
config.btnArr[config.index].className = '';
self.config.index = index;
config.btnArr[config.index].className = 'on';
val = index * val - parseFloat(self.getStyle(config.elem, 'marginLeft'));
self.transform(val);
},
play:function(index){
var self = this,
config = this.config;
self.clear(config.auto);
config.auto = setInterval(auto, 1500);
function auto(){
var val = -610;
config.btnArr[config.index].className = '';
if(++config.index > 4){
val = -((config.index-1) * val);
config.index = 0;
}
config.btnArr[config.index].className = 'on';
self.go(config.index);
}
}
}
var a = new Slide().play();
})()
</script>
</body>
</html>
