<script type="text/javascript">
// JavaScript Document
var ben_me;
var extend=function(target,source){for(var key in source){target[key]=source[key];}}
var each=function(iterate,callback,context){
if(Object.prototype.toString.call(iterate)==="[Array object]"){
for(var i=0,len=iterate.length;i<len;i++){
if(callback.call(context,iterate[i],i,iterate)==="false") break;
}
}
else{
for(var key in iterate){
if(callback.call(context,iterate[key],key,iterate)==="false") break;
}
}
}
var bind=function(context,fun){
var arg=Array.prototype.slice.call(arguments,2);
return function(){
fun.apply(context,arg.concat(Array.prototype.slice.call(arguments)));
}
}
var Class={
create:function(){
return function(){
this.init.apply(this,arguments);
}
}
}
var Item=Class.create(),
Carousel=Class.create();
Item.prototype={
init:function(parent,radians,imgOptions){
var elem=document.createElement("div");
this.element=elem;
this.radians=radians;
this.parent=parent;
elem.innerHTML=imgOptions;
elem.style.position="absolute";
parent.element.appendChild(elem);
elem.onmouseup=bind(this,function(){
clearInterval(ben_au);
var rad=this.getRotateRadians();
if(Math.abs(rad)<0.00001){
//console.log("clicked current item"); can do something here
//alert(this.radians)
}
this.parent.rotate(rad);
ben_au = setInterval(function(){c.next();},ben_time);
});
},
update:function(deltaRadians){
this.radians=(this.radians+deltaRadians+2*Math.PI)%(Math.PI*2);
var opt=this.parent.options,
radius=opt.radius,
center=opt.center,
itemSize=opt.itemSize,
_left=radius[0]*Math.cos(this.radians),
_top=radius[1]*Math.sin(this.radians),
zRadius=this.parent.zoomAxis?radius[1]:radius[0],//select out the short base radius
zFactor=this.parent.zoomAxis?_top:_left, //
zoom=(zFactor+zRadius*1.5)/(2.5*zRadius),
_width=itemSize[0]*zoom,
_height=itemSize[1]*zoom,
z=Math.floor(zoom*100),
xx=center[0]+_left-_width/2+'px',
yy=center[1]+_top-_height/2+'px';
var style=this.element;
style.style.cssText="left:"+xx+";top:"+yy+";width:"+_width+'px;'+"height:"+_height+'px;'+"z-index:"+z;
style.className="Bpls";
style.getElementsByTagName("img")[0].style.cssText="width:"+_width+'px;'+"height:"+_height+'px;';
},
getRotateRadians:function(){
var PI=Math.PI,
r=this.radians%(PI*2),
tr=this.parent.targetRotate,
target=tr-r,
delta=target<-PI?target+2*PI:target;
return delta;
}
}
Carousel.prototype={
next:function(){
var len = this.items.length == 0 ? 0 : 2*Math.PI/this.items.length;
this.rotate( len );
this.isClick();
},
pre:function(){
var len = this.items.length == 0 ? 0 : -2*Math.PI/this.items.length;
this.rotate(len);
this.isClick();
},
init:function(){
if(!arguments||!arguments[0].items){
console.log("in if ");
return
};
var arg=arguments[0],
elem=document.getElementById(arg.container),
_this=this,
sperateRadians=2*Math.PI/arg.items.length,
radius;
this.element=elem;
this.items=[];
this.timer=null;
this.flag=false;
this.setConfig(arg.configs||{});
radius=this.options.radius;
this.zoomAxis=Math.abs(radius[0])>Math.abs(radius[1]);//選短軸，即true時選y,false選x
this.targetRotate=(this.zoomAxis)? Math.PI/2:0;
each(arg.items,function(val,index){
//alert(index)
var _item=new Item(this,sperateRadians*index,val);
this.items.push(_item);
},this);
this.rotate(this.targetRotate);
},
setConfig:function(opts){
this.options={
interval:20,
duration:1000,
center:[this.element.offsetWidth/2,this.element.offsetHeight/2],// x,y
radius:[200,50], // x,y
itemSize:[200,120], //width,height
radiusX:200,
radiusY:50,
initRotate:Math.PI/-2,
easy:function(p){
return 1-Math.pow(1-p,3);
}
}
extend(this.options,opts);
},
rotate:function(radians){
if(this.flag){
clearInterval(this.timer);
}
clearInterval(this.timer);
this.begin=(new Date()).getTime();
this.rotateRadians=radians;
this.completeFraction=0;
this.timer=setInterval(bind(this,function(){this.update();}),this.options.interval);
},
update:function(){
var opt=this.options,
_this=this,
fraction,
rad
now=(new Date()).getTime();
if((this.begin+opt.duration)<=now){
clearInterval(this.timer);
this.flag=false;
rad=(1-this.completeFraction)*this.rotateRadians;
each(this.items,function(val,key){
val.update(rad);
});
}
else{
fraction=opt.easy((now-this.begin)/opt.duration);
rad=this.rotateRadians*(fraction-this.completeFraction);
this.completeFraction=fraction;
each(this.items,function(val,key){
val.update(rad);
});
}
this.isClick();
},
isClick:function(){
each(this.items,function(val,key){
var o = val.element;
var is_click = ( o.style.zIndex > 98 ) ? true : false;
o.onclick=function(){
return is_click;
}
});
}
}
</script>
<div class="carousel pa" id="con">
<script type="text/javascript" >
var c=new Carousel({
container:"con",
configs:{duration:330,interval:60,itemSize:[385,243],radius:[320,1]},
items:['<div class="list"><a target="_blank" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic1.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic2.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic3.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic4.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic5.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic6.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic7.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic8.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic9.jpg" alt="" /></a></div>'
,'<div class="list"><a target="_blank" href="#" title="" target="_blank"><img src="http://topic.aili.com/images/topic_digital_lephone01/pic10.jpg" alt="" /></a></div>'
]
});
var ben_time = 5000;
var ben_au = setInterval(function(){c.next();},ben_time);
function Cnext(){
clearTimeout(ben_me);
clearInterval(ben_au);
ben_me = setTimeout(function(){c.next();},600);
ben_au = setInterval(function(){c.next();},ben_time);
}
function Cpre(){
clearTimeout(ben_me)
clearInterval(ben_au);
ben_me = setTimeout(function(){c.pre();},600);
ben_au = setInterval(function(){c.next();},ben_time);
}
</script>
</div>