随笔 - 78  文章 - 25  trackbacks - 0
<2010年2月>
31123456
78910111213
14151617181920
21222324252627
28123456
78910111213

常用链接

留言簿

随笔分类(75)

随笔档案(78)

相册

实用Links

我的Links

搜索

  •  

积分与排名

  • 积分 - 111761
  • 排名 - 519

最新评论

阅读排行榜

评论排行榜

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
     
<HEAD>
      
<TITLE> Show Pictures </TITLE>
      
<META NAME="Generator" CONTENT="EditPlus">
      
<META NAME="Author" CONTENT="">
      
<META NAME="Keywords" CONTENT="">
      
<META NAME="Description" CONTENT="">
     
</HEAD>

     
<BODY>
          
<center>
              
<h1>Ajax无刷新实现图片切换特效</h1>
              
<hr >
              
<br >
              
<h5>效果如下</h5>
              
<div class="mod" id="mod_album" xmlns="">
              
<center class="modhead">
              
<span class="phpage">
              
<href="#" onclick="previous();return false;"><img border="0" align="absmiddle" width="60" height="60" src="previous.png" title="lastone" alt="lastone"onmouseover="" onmouseout=""  /> </a> 
              
<href="#" onclick="PlayControl();return false;"><img border="0" align="absmiddle" width="60" height="60" src="pause.png" title="pause" onmouseover="m_over(this)" onmouseout="m_out(this)" id="playControlImg" /></a>
              
<href="#" onclick="next();return false;"><img border="0" align="absmiddle" width="60" height="60" src="next.png" title="nextone" alt="nextone"onmouseover="" onmouseout=""  /> </a> 
            
</span>
            
</center>
            
<div id="m_album" class="modbox">
                
<div style="" class="image" id="imgArea">
                
<center id="picdiv"></center>
                
</div>
                
</div>

                
<script type="text/javascript">
                
function $(id){
                    
return document.getElementById(id);
                }
                    
var nowid=0;
                    
var pNum=0;
                    
var time=3000;
                    
var starting;
                    
var isPlaying=true;
                    
var playContrlImg=$("playControlImg");
                    
var picdiv=$("picdiv");    
                    
var photoIndexs=[];
                    
for(var i=0;i<64;i++){
                        photoIndexs[i]
='IMG_'+(i+1)+'.JPG';
                    }
                    pNum
=photoIndexs.length;
                    
if(0!=pNum){
                        $(
"imgArea").style.display='';
                        picdiv.innerHTML
='<img src="'+photoIndexs[0]+'"border="0" /></a>';
                        starting
=setInterval("rockPhoto()",time);
                    }
                    
function m_over(ele){
                        
if(isPlaying) ele.src="play.png";
                        
else ele.src="pause.png";
                    }
                    
function m_out(ele){
                        
if(isPlaying) ele.src="pause.png";
                        
else ele.src="play.gif";
                    }
                    
function playControl(){
                        clearInterval(starting);
                        
if(isPlaying){
                            isPlaying
=false;
                            playControlImg.src
="play.png";
                            playControlImg.title
="start play";
                        }
                        
else{
                            starting
=setInterval('rockPhoto()',time);
                            isPlaying
=true;
                            playControlImg.src
="pause.png";
                            playControlImg.title
="pause";
                        }
                    }
                    
function rockPhoto(){
                        nowid
++;
                        
if(nowid>=pNum) nowid=0;
                        picdiv.innerHTML
='<img src="'+photoIndexs[nowid]+'"border="0" />';
                    }
                    
function next(){
                        rockPhoto();
                    }
                    
function previous(){
                        nowid
--;
                        
if(nowid<0) nowid=pNum-1;
                        picdiv.innerHTML
='<img src="'+photoIndexs[nowid]+'"border="0" />';
                }
                
</script>
            
</div>    
        
</center>
    
</BODY>
</HTML>
posted on 2010-02-05 14:47 期待明天 阅读(2213) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: