js代码
    
         window.onload=function()    {    	var dealy=5000;				//3秒滾動一张圖片，可自行修改    	var MyBox=document.getElementById('mF_ysw_wrap');    	var word=document.getElementById('wenzi');    	var txt=document.getElementById('txt').getElementsByTagName('li');;    	var oBox=document.getElementById('box');    	var aList=document.getElementById('list');    	var aNum=document.getElementById('num').getElementsByTagName('li');    	var timer=null;    	var now=0;    	for (var i=0; i
     
    

主要处理函数

function getStyle(obj,name){	if(obj.currentStyle)	{		return obj.currentStyle[name];	}	else	{		return getComputedStyle(obj,false)[name];	}}function Running(obj,json,fnEnd){	clearInterval(obj.timer);	obj.timer=setInterval(function()	{		var now=0;		var bStop=true;		for (var attr in json)		{			if(attr=='opacity')			{				now=Math.round(parseFloat(getStyle(obj,attr))*100);			}			else			{				now=parseInt(getStyle(obj,attr));				document.getElementById('wenzi').value=attr;			}			var speed=(json[attr]-now)/5;			speed=speed>0?Math.ceil(speed):Math.floor(speed);			if(now!=json[attr])bStop=false;			if(attr=='opacity')			{				obj.style.filter='alpha(opacity:'+now+speed+')';				obj.style.opacity=(now+speed)/100;			}			else			{				obj.style[attr]=speed+now+'px';			}		}		if(bStop)		{			clearInterval(obj.timer);			if(fnEnd)fnEnd();		}	}, 30);}function Flexing(obj,json,fnEnd){	clearInterval(obj.timer);	obj.timer=setInterval(function()	{		var now=0;		var bStop=true;		for (var attr in json)		{			if(!obj.speed)obj.speed={};			if(!obj.speed[attr])obj.speed[attr]=0;			now=parseInt(getStyle(obj,attr));			if(Math.abs(json[attr]-now)>1 || Math.abs(obj.speed[attr])>1)			{				bStop=false;				obj.speed[attr]+=(json[attr]-now)/5;				obj.speed[attr]*=0.85;				var MaxSpeed=50;				if(Math.abs(obj.speed[attr])>MaxSpeed)				{					obj.speed[attr]=obj.speed[attr]>0?MaxSpeed:-MaxSpeed;				}				obj.style[attr]=now+obj.speed[attr]+'px';			}		}		if(bStop)		{			clearInterval(obj.timer);			obj.style[attr]=json[attr]+'px';			if(fnEnd)fnEnd();		}	}, 30);}

body部分内容

    
         
     
          
      
           
       
            
        
              	
         
              
          
           
            
                 
             
              
               
                    
                
                 
                  
                       
                   
                    
                     
                          
                      
                       
                        
                                       
                         
                              
                          
                                
                           
                            
                             酷站代码整理
                             
图片1更详细的描述文字
                                  
                             
                              
                               酷站代码整理
                               
图片2更详细的描述文字
                                    
                               
                                
                                 酷站代码整理
                                 
图片3更详细的描述文字
                                      
                                 
                                  
                                   酷站代码整理
                                   
图片4更详细的描述文字
                                        
                                   
                                    
                                     酷站代码整理
                                     
图片5更详细的描述文字
                                         
                                    
                                   
                                  
                                 
                                
                               
                              
                             
                            
                           
                          
                
                          
                               
                           
                                 
                            
                             
                              图片1更详细的描述文字
                                   
                              
                               
                                图片2更详细的描述文字
                                
                               
     
                              
                               
                                图片3更详细的描述文字
                                
                               
     
                              
                               
                                图片4更详细的描述文字
                                
                               
     
                              
                               
                                图片5更详细的描述文字
                                
                               
    
                             
                            
                           
        
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

样式

    
         body { background:#fff; padding:20px;}    .mF_ysw_wrap{position: relative;float: left;overflow: hidden;padding: 6px;border: 1px solid #333;width:946px;height:331px;}    #myFocus {width: 679px;height: 331px;clear: both;}    .mF_ysw_myFocus * {margin: 0;padding: 0;border: 0;list-style: none;}    .mF_ysw_wrap * {margin: 0;padding: 0;border: 0;list-style: none;}    .mF_ysw_myFocus {position: relative;height: 331px;overflow: hidden;font: 12px/1.5 Verdana;text-align: left;background: #fff;visibility: visible!important;}    .mF_ysw .slider {height: 100%;position: absolute;overflow: hidden;}    .mF_ysw .slider .pic {height: 100%;width: 100%;}    .mF_ysw_myFocus .pic {position: relative;height: 331px;overflow: hidden;}    .mF_ysw .slider .pic li {height: 331px;overflow: hidden;float:left;}    .mF_ysw .slider .txt {width: 100%;}    .mF_ysw .slider .txt li {position: relative;height: 34px;line-height: 34px;display:inline-block;}    .mF_ysw_myFocus .txt li {width: 675px;height: 34px !important;}    .mF_ysw .slider .txt li a {position: relative;z-index: 1;color: #fff;font-size: 14px;font-weight: bold;text-decoration:none;}    .mF_ysw .slider .txt li b {width:679px;height: 100%;position: absolute;top: 0;background: #000;filter: alpha(opacity=40);opacity: 0.4;}    .mF_ysw_wrap .num {width:260px;position: absolute;z-index: 2;bottom: 6px;right: 12px;}    .mF_ysw_wrap .num li {width: 260px;height: 60px;line-height: 16px;margin-left: 4px;text-align: center;border: 1px solid #000;cursor: pointer;margin-top:5px;}    .mF_ysw_wrap .num li img{margin-top:5px;position:absolute;left:10px;}    .mF_ysw_wrap .num li a{margin-top:5px;position:absolute;left:100px;font-family:"微软雅黑";font-size:14px;}    .mF_ysw_wrap .num li.active{background:#ff9900;color:white;}