jquery 图片自动切换详解编程语言

 !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=gb2312" / 

 title JQUERY实现图片自动切换 /title 

 style 

 body{margin:0px; padding:0px; font-family:Arial} 

 ul{list-style:none;margin:0px;padding:0px} 

 .click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; } 

 .click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; } 

 /style 

 script language="javascript" src="../Script/jquery-1.4.4.min.js" /script 

 /head 

 body 

 div id="flash_outer" 

 div id="flash_pic" 

 div /div 

 div /div 

 div /div 

 div /div 

 /div 

 ul id="flash_num" 

 li 1 /li 

 li 2 /li 

 li 3 /li 

 li 4 /li 

 /ul 

 /div 

 script language="javascript" 

 $(document).ready(function() 

 var len=$("#flash_num li").length; 

 var index=1; 

 var int; 

 function showSys(num) //图片切换函数 

 $("#flash_num li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over"); 

 $("#flash_pic div").fadeOut().eq(num).fadeIn(); 

 function ziDong() //自动切换 

 if(index==len) 

 index=0; 

 showSys(index); 

 index=index+1; 

 int=setInterval(ziDong,3000); 

 $("#flash_num li").click(function(） //点击切换 

 var index_num=$("#flash_num li").index(this); 

 showSys(index_num); 

 index=index_num+1; //改变全局变量的值，以便鼠标移开的时候能够衔接上 

 //$(".click_out").removeClass("click_over").eq(index).addClass("click_over"); 

 //$(".click_out").eq(index).removeClass().addClass("click_over"); 

 //alert(index); 

 }); 

 $("#flash_outer").mouseover(function() //移动到上面时停止自动切换 

 clearInterval(int); 

 }); 

 $("#flash_outer").mouseout(function() //移开时继续自动切换 

 int=setInterval(ziDong,3000); 

 }); 

 }); 

 /script 

 /body 

 /html 

8837.html