公司项目上的一个需求，说不上来叫什么名字，不过可以用来做一个图片展示。
公司项目上的一个需求，说不上来叫什么名字，不过可以用来做一个图片展示。
JS：
function slideShow(){this.init.apply(this,arguments)}
slideShow.prototype = {
init:function(opts){
var set = {
perv:'prev',
next:'next',
r_prev:'r_prev',
r_next:'r_next',
r_con:'content',
thumbnail : 'thumbnail',
height:92,
len:3
}
opts = opts || {};
this.opts = this.extend(set,opts);
this.perv = this.getId(this.opts.perv);
this.next = this.getId(this.opts.next);
this.r_prev = this.getId(this.opts.r_prev);
this.r_next = this.getId(this.opts.r_next);
this.thumbnail = this.getId(this.opts.thumbnail);
this.bigBox = this.getId(this.opts.r_con);
var _this = this;
this.items = this.thumbnail.getElementsByTagName('li');
var len = this.items.length;
this.slieding = false;
this.count = 0;
this.n = 0;
this.current =0;
this.perv.onclick = function(){
if(_this.n == len-_this.opts.len) return;
if(_this.slieding) return;
_this.n++;
_this.slide(-1);
return false;
};
this.next.onclick = function(){
if(_this.n == 0) return;
if(_this.slieding) return;
_this.n--;
_this.slide(1);
return false;
};
this.r_prev.onclick = function(){
if(_this.current == 0) return;
if(_this.slieding) return;
_this.current--;
if(_this.n-1 ==_this.current) _this.fireEvent(_this.next,'click');
_this.bigBox.innerHTML = _this.items[_this.current].innerHTML;
};
this.r_next.onclick = function(){
if(_this.current == len-1) return;
if(_this.slieding) return;
_this.current++
if(_this.n+_this.opts.len==_this.current) _this.fireEvent(_this.perv,'click');
_this.bigBox.innerHTML = _this.items[_this.current].innerHTML;
};
this.play();
},
fx:function (f,t,fn,callback){
var D=Date,d=+new D,e,T=480,ed=ed||D,F=function(x) {return (x /= 0.5) < 1 ? (0.5 * Math.pow(x, 2)) : (-0.5 * ((x -= 2) * x - 2))};
return e=setInterval(function (){
var z=Math.min(1,(new D-d)/T);
if(false===fn(+f+(t-f)*F(z),z)||z==1)ed(clearTimeout(e),callback());
},10)
},
getId:function(el){
return el = typeof el == 'string' ? document.getElementById(el) : el;
},
slide:function(k){
var _this = this;
var old = this.count * this.opts.height;
k > 0 ? this.count++ : this.count--;
var now = this.count * this.opts.height;
return function(s,n){
_this.fx(s,n,function(x){
_this.slieding = true;
_this.thumbnail.style.top = x + 'px';
},function(){
_this.slieding = false;
})
}(old,now);
},
extend:function(baseObj,extendObj){
for(var i in extendObj) baseObj[i] = extendObj[i]
return baseObj;
},
play:function(){
var _this = this;
var i=0,len=this.items.length;
for(;i<len;i++){
(function(i){
_this.items[i].onclick = function(){
_this.current = i;
_this.bigBox.innerHTML = this.innerHTML;
}
})(i);
}
},
fireEvent:function(el,type){
if(document.createEventObject){
return el.fireEvent('on'+type);
}else{
var e = document.createEvent('HTMLEvents');
e.initEvent(type,true,true);
return !el.dispatchEvent(e);
}
}
}
new slideShow();
<!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">
* { padding:0; margin:0;}
ul { list-style:none;}
.clear{ clear:both; height:0; overflow:hidden;}
#outer { width:600px; height:315px; margin:100px auto;}
#box { width:134px; float:left;}
#box a { display:block; height:20px; background:#000; line-height:20px; text-align:center; color:#fff; text-decoration:none; font-weight:bold;}
#thumbnail_box { height:275px; overflow:hidden; position:relative;}
#thumbnail { position:absolute;top:0; left:0; width:134px;}
#thumbnail li { height:91px; background:#CCC; margin-bottom:1px; font-size:50px; font-weight:bold; text-align:center; line-height:91px; cursor:pointer;}
#con { margin-left:139px; background:#000; height:315px;color:#fff; text-align:center; line-height:315px; font-size:50px; position:relative;}
#content {height:315px;}
#con a { width:49%;height:315px; position:absolute;top:0;}
#r_prev { left:0;}
#r_next{right:0;}
</style>
</head>
<body>
<div id="outer">
<div id="box">
<a href="#" title="prev" id="prev">prev</a>
<div id="thumbnail_box">
<ul id="thumbnail">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<a href="#" title="next" id="next">next</a>
</div>
<div id="con">
<div id="content">1</div>
<a href="#" title="prev" id="r_prev">prev</a>
<a href="#" title="next" id="r_next">next</a>
</div>
</div>
<script type="text/javascript" src="slideShow.js"></script>
</body>
</html>
