<!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>js-图片旋转</title>
<style type="text/css">
*{ margin:0; padding:0}
#box{ position: relative; width:552px; height:200px; border:1px solid #999; margin:100px; background:#666666}
#box img{ width:150px; height:200px}
#bg {width:100%; height:100%; position:absolute; left:0; top:0; filter:alpha(opacity:60); opacity:0.6; background:black; z-index:1000;}
#prog {width:324px; height:40px; background:url(images/bar.png) no-repeat 0 20px; position:absolute; z-index:2000; top:50%; left:50%; margin:-20px 0 0 -162px; font-family:arial; font-size:12px; color:#fff; text-align:center;}
#prog span {font-family:"宋体";}
.btn1,.btn2{ z-index:800; position:absolute;width:50px; height:30px; line-height:30px}
.btn1{ top:80px; right:60px; }
.btn2{ top:80px; left:60px}
#bar {width:0%; height:16px; background:url(images/bar_line.gif) repeat-x; overflow:hidden; position:absolute; bottom:2px; left:2px;}
.div1{ position:absolute; top:0px; left:0px; width:150px; height:200px; background:#0033CC; opacity:0.1; z-index:10}
.div2{ position:absolute; top:0px; left:100px; width:150px;height:200px; background: #000;opacity:0.3; z-index:50}
.div3{ position:absolute; top:0px; left:200px; width:150px; height:200px;background: #F90;opacity:1; z-index:100}
.div4{ position:absolute; top:0px; left:300px; width:150px;height:200px; background: #60C;opacity:0.3; z-index:50}
.div5{ position:absolute; top:0px; left:400px; width:150px; height:200px;background: #F90;opacity:0.1; z-index:10}
</style>
</head>
<body>
<div id="box">
<div id="bg"></div>
<div id="prog">
图片载入中......<span>0%</span>
<div id="bar"></div>
</div>
<div id="btnBox"><button class="btn1">前一张</button><button class="btn2">后一张</button></div>
<div id="zbox">
<div class="div1"><img src="" width="150" height="200" /></div>
<div class="div2"><img src="" width="150" height="200" /></div>
<div class="div3"><img src="" width="150" height="200" /></div>
<div class="div4"><img src="" width="150" height="200" /></div>
<div class="div5"><img src="" width="150" height="200" /></div>
</div>
</div>
<script type="text/javascript">
var aBox=document.getElementById("box");
var zBox=document.getElementById("zbox");
var oImg=zBox.getElementsByTagName("img");
var oBtn0=aBox.getElementsByTagName("button")[0];
var oBtn1=aBox.getElementsByTagName("button")[1];
var div=zBox.getElementsByTagName("div");
var oTxt=document.getElementById('prog').getElementsByTagName('span')[0];
var oBar=document.getElementById('bar');
var arr=[];
var imgsrc=[
"http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg",
"http://img7.9158.com/200709/01/11/53/200709018758949.jpg",
"http://img7.9158.com/200708/10/09/18/200708103758836.jpg",
"http://img.pconline.com.cn/images/photoblog/1/0/1/7/10173588/200911/7/1257560022502_mthumb.jpg",
"http://ishare.iask.sina.com.cn/play.php?fileid=8156385&path=20100610_7881956_0.jpg"
];
var bBtn=true;
var icenter=2;
var timer=null;
var iLoad=0;
//图片预加载
for(var i=0;i<oImg.length;i++){
(function(i){
var Img=new Image();
Img.src=imgsrc[i];
Img.onload=function(){
oTxt.innerHTML=oBar.style.width=Math.ceil(100*iLoad/oImg.length)+'%';
Img.onload=null;
oImg[i].src=this.src;
iLoad+=1;
if(iLoad==oImg.length){
document.getElementById('prog').style.display=document.getElementById('bg').style.display='none';
aBox.style.display="block";
imgAuto();
}
}
})(i)
}
function imgAuto(){
for(var i=0;i<div.length;i++){
arr.push([getStyle(div[i],"left"),getStyle(div[i],"top"),getStyle(div[i],"opacity"),i,getStyle(div[i],"zIndex")]);
div[i].style.left=200+"px";
div[i].style.top=0+"px";
}
setTimeout(function(){
for(var i=0;i<div.length;i++){
startMove(div[i],{left:parseInt(arr[i][0]),top:parseInt(arr[i][1]),opacity:arr[i][2]*100,zIndex:parseInt(arr[i][4])});
}
},500);
oBtn0.onclick=function(){
if(bBtn){
bBtn=false;
arr.push(arr.shift());
dh();
}
}
oBtn1.onclick=function(){
if(bBtn){
bBtn=false;
arr.unshift(arr.pop());
dh();
}
}
aBox.onmouseover=function(){
clearInterval(timer);
}
aBox.onmouseout=function(){
timer=setInterval(function(){
arr.push(arr.shift());
dh();
},3000);
}
timer=setInterval(function(){
arr.push(arr.shift());
dh();
},3000);
for(var i=0;i<div.length;i++){
div[i].index=i;
div[i].onclick=function(){
var num=arr[this.index][3];
if(num<icenter){
for(var i=0;i<icenter-num;i++){
arr.push(arr.shift());
dh();
}
}
if(num>icenter){
for(var i=0;i<num-icenter;i++){
arr.unshift(arr.pop());
dh();
}
}
}
}
function dh(){
for(var i=0;i<div.length;i++){
startMove(div[i],{left:parseInt(arr[i][0]),top:parseInt(arr[i][1]),opacity:arr[i][2]*100,zIndex:parseInt(arr[i][4])},function(){
bBtn=true;
});
}
}
}
function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设：所有值都已经到了
for(var attr in json)
{
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}
var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
bStop=false;
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else if(attr=="zIndex"){
obj.style[attr]=cur+speed;
}else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
}, 30);
}
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
</script>
</body>
</html>
