jquery 模拟 flash 图片切换功能

 js代码

jQuery.fn.extend({
showNews:function(pic,text,url){
      var allNums = new String();
      var picLoader = new Array(); 
      var pics = pic;/* 图片路径 */
      for(var m=0;m
 
 
  
  

  
  

  
  
");
	  this.css({position:"relative",overflow:"hidden"});
	  for(var i=0;i
  
  
   
   

    
    "+j+"
   
   
";
	  }
	  $("div.numContain").html(allNums);//初始化按钮个数
	  $("div.num").eq(0).addClass("activeNum");//初始化已选定按钮
      $("div.showPic").html("
   
   ");//初始化图片
	  $("div.showText").html("
   
   "+texts[0]+"");//初始化新闻标题	  
	  /* 自动切换 */
	  var c = 1;
	  function clearAuto(){clearInterval(autoRun);}
      function setAuto(){autoRun = setInterval(autoChange,3000);}
	  function autoChange(){  
		  if(c
   
   
    
    a>img").fadeOut("fast",function(){$("div.showPic").html("
    
    ");//切换图片
              $("div.num").each(function(i){this.className="num";if(i==c-1){$(this).addClass("activeNum")}});//切换按钮样式
			  $("div.showText").html("
    
    "+texts[c-1]+"");});//切换新闻链接 
			  //alert(c);  
			  }
		  else{c=0;}
		  }
		  setAuto();
	  /* 事件切换 */
      $("div.num").click(
	       function(e){
			  
		      var num = e.target.innerHTML;
			  var traceNum = parseInt(num,10)-1;
			  c = traceNum+1;
			  if(texts[traceNum]==$("div.showText>a").html()){
				 return false;  
			  }//判断点击触发位置是否为当前位置，是就不切换，否则。。。。
			  else{
			  $("div.showPic>a>img").fadeOut("fast",function(){$("div.showPic").html("
    
    ");//切换图片
			  $("div.num").each(function(i){this.className="num";if(i==traceNum){$(this).addClass("activeNum")}});//切换按钮样式
			  $("div.showText").html("
    
    "+texts[traceNum]+"");
			  });
			  //切换新闻链接	
			  }
		   }
	   ).mouseover(function(){clearAuto()}).mouseout(function(){setAuto()}); 
}})
















  
    
    

   
   
  
  
 
 

首先你要引用上面的代码，然后引用jquery文件调用语句：<script type="text/javascript">
$(document).ready(function(){
$(".pics").showNews(["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"],["时空骇客","史前一万年","鼠来宝","尼斯湖水怪","我是传奇"],["#1","#2","#3","#4","#5"]);});
</script>