html+js 仿flash动画实例

用html+javascript实现了一个仿flash动画实例，其实做起来也有些难度，主要是动画的移动和图的切换。

先给出实现后的效果图：

先贴出html代码部分

<div id="playimages" class="play">
   <ul class="big_pic">
      
      <div class="prev"></div>   <!--左按钮 -->
      <div class="next"></div>    <!--右按钮 -->
       
       <div class="text">加载图片说明......</div>
       <div class="length">计算图片数量.....</div>
       <a class="mark_left" href="javascript:;"></a>   //左箭头切换图片
       <a class="mark_right" href="javascript:;"></a>  //右箭头切换图片
       <div class="bg"></div>
         <!-- 这是下面六张图 -->
        <li style="z-index:1;"><img src="image/1.jpg" /></li> 
        <li><img src="image/2.jpg" /></li> 
        <li><img src="image/3.jpg" /></li> 
        <li><img src="image/4.jpg" /></li> 
        <li><img src="image/5.jpg" /></li> 
        <li><img src="image/6.jpg" /></li> 

    </ul>
    <div class="small_pic">
       <ul style="width:390px;">
            <li style=" filter: opacity(100); opacity: 1;"><img src="image/1.jpg" /></li>
            <li><img src="image/2.jpg" /></li>
            <li><img src="image/3.jpg" /></li>
            <li><img src="image/4.jpg" /></li>
            <li><img src="image/5.jpg" /></li>
            <li><img src="image/6.jpg" /></li>
       </ul>
    </div>
 </div>

下面主要的js 代码部分

  这是页面加载是触发的js

 

window.οnlοad=function()
{  
   var oDiv=document.getElementById('playimages');
   
   var oBtnPrev=getByClass(oDiv,'prev')[0];
   var oBtnNext=getByClass(oDiv,'next')[0];
   var oMarkLeft=getByClass(oDiv,'mark_left')[0];
   var oMarkRight=getByClass(oDiv,'mark_right')[0];
   
   var oUlBig=getByClass(oDiv,'big_pic')[0];
   var aLiBig=oUlBig.getElementsByTagName('li');
   
   var oDivsmall=getByClass(oDiv,'small_pic')[0];
   var oUlSmall=oDivsmall.getElementsByTagName('ul')[0];
   var aLiSmall=oDivsmall.getElementsByTagName('li');
   
    //记录当前点击的是第几张图片(上一张/下一张）
   
   var nowZIndex=2; 
   
   var now=0;
   
   oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
   
   //左右按钮
   oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function()
   {
      startMove(oBtnPrev,'opacity',100);
      
   };
   oBtnPrev.οnmοuseοut=oMarkLeft.οnmοuseοut=function()
   {   
      startMove(oBtnPrev,'opacity',0);
   };
   
   oBtnNext.οnmοuseοver=oMarkRight.οnmοuseοver=function()
   {
      startMove(oBtnNext,'opacity',100);
      
   };
   oBtnNext.onmuseout=oMarkRight.οnmοuseοut=function()
   {   
      startMove(oBtnNext,'opacity',0);
   };
   
   //大图切换
   for( var i=0;i<aLiSmall.length; i++)
   {  
       aLiSmall[i].index=i; 
      aLiSmall[i].οnclick=function()
      {    
         if(this.index==now) return;//当index与now,说明当前单击是同一张图片
         
         now=this.index;//否则就把下一张付给now 
         Tab();    
      };
      
      aLiSmall[i].οnmοuseοver=function() //设置当前小图的透明度
       {
          startMove(this,'opacity',100);
       };
      
      aLiSmall[i].οnmοuseοut=function()
      {
         
          if(this.index!=now)
          {    
               startMove(this,'opacity',60);
          }  
      };   
   }
   function Tab()
   {
      aLiBig[now].style.zIndex=nowZIndex++;//设置当前上图显示的是第几张图片（设置图片的层数）
         
          for( var i=0;i<aLiSmall.length;i++)
          { 
             startMove(aLiSmall[i],'opacity',60);
          }
          startMove(aLiSmall[now],'opacity',100);
          
         aLiBig[now].style.height=0;//当前大图由上往下拉，改变当前图片的高度  
         startMove(aLiBig[now],'height',320);
         
         if(now==0)
         {
            startMove(oUlSmall,'left',0);
         }
         else if(now==aLiSmall.length-1)
         {
            startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
         }
         else
         {
             startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
         }
   }  
   
   //上一张雨下一张的切换
   oBtnPrev.οnclick=function()
   {
      now--;
      if(now==-1)
      {
         now=aLiSmall.length-1;
      }
      Tab();
   };
   oBtnNext.οnclick=function()
   {
      now++;
      if(now==aLiSmall.length)
      {
         now=0;
      }
      Tab();
   };
   var timer=setInterval(oBtnNext.onclick,2000);
   
   oDiv.οnmοuseοver=function()
   {
       clearInterval(timer);
   };
    oDiv.οnmοuseοut=function()
   {
      timer=setInterval(oBtnNext.onclick,2000);
   };
   
};

下面是方法调用

function getStyle(obj, name) 
{     
   if(obj.currentStyle)
   {   
      return obj.currentStyle[name];
   }
   else
    {   
      return getComputedStyle(obj,false)[name];
      
   }
}

function startMove(obj,atrr,iTarget) 
{    
   clearInterval(obj.timer);
   obj.timer=setInterval(function()
   {       
      var cur=0; 
      if(atrr=='opacity')
      {
         cur=Math.round(parseFloat(getStyle(obj, atrr))*100);
      }
      else
      {
         cur=parseInt(getStyle(obj, atrr));
      }
      
      var speed=(iTarget-cur)/6;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(cur==iTarget)
      {  
         clearInterval(obj.timer);
      }
      else
      {  
         if(atrr=='opacity')
         {
            obj.style.filter='alpha(opacity:'+(cur+speed)+')';
            obj.style.opacity=(cur+speed)/100;   
            
            //document.getElementById('txt1').value=obj.style.opacity;
         }
         else
         {
              obj.style[atrr]=cur+speed+'px'; 
         }
      }
  },30);
   
} 

function getByClass(oParent, aClass)
{
    //alert('a')
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];   
    
    for(var i=0;i<aEle.length;i++)
    {
       if(aEle[i].className==aClass)
       {
          aResult.push(aEle[i]);
       }
    }
    return aResult;
}

代码就完了，运行这个html就能看到所上的效果。