1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>JQUERY实现图片自动切换</title> 6 <style> 7 body{margin:0px; padding:0px; font-family:Arial} 8 ul{list-style:none;margin:0px;padding:0px} 9 .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; } 10 .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; } 11 </style> 12 <script language="javascript" src="../Script/jquery-1.4.4.min.js"></script> 13 </head> 14 <body> 15 <div style="height:230px; 980px; background:#EBEBEB; position:relative" id="flash_outer"> 16 <div style=" position:absolute; left:0px; top:0px; 980px; height:230px; overflow:hidden" id="flash_pic"> 17 <div style="980px; height:250px; background:url(flash_pic/1.jpg)"></div> 18 <div style="980px; height:250px; background:url(flash_pic/2.jpg)"></div> 19 <div style="980px; height:250px; background:url(flash_pic/3.jpg)"></div> 20 <div style="980px; height:250px; background:url(flash_pic/4.jpg)"></div> 21 </div> 22 <ul style="position:absolute; right:0px; bottom:0px; height:16px" id="flash_num"> 23 <li class="click_over">1</li> 24 <li class="click_out">2</li> 25 <li class="click_out">3</li> 26 <li class="click_out">4</li> 27 </ul> 28 </div> 29 <script language="javascript"> 30 $(document).ready(function() 31 { 32 var len=$("#flash_num>li").length; 33 var index=1; 34 var int; 35 function showSys(num) //图片切换函数 36 { 37 $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over"); 38 $("#flash_pic>div").fadeOut().eq(num).fadeIn(); 39 } 40 function ziDong() //自动切换 41 { 42 if(index==len) 43 { 44 index=0; 45 } 46 showSys(index); 47 index=index+1; 48 } 49 int=setInterval(ziDong,3000); 50 $("#flash_num>li").click(function(） //点击切换 51 { 52 var index_num=$("#flash_num>li").index(this); 53 showSys(index_num); 54 index=index_num+1; //改变全局变量的值，以便鼠标移开的时候能够衔接上 55 //$(".click_out").removeClass("click_over").eq(index).addClass("click_over"); 56 //$(".click_out").eq(index).removeClass().addClass("click_over"); 57 //alert(index); 58 }); 59 $("#flash_outer").mouseover(function() //移动到上面时停止自动切换 60 { 61 clearInterval(int); 62 }); 63 $("#flash_outer").mouseout(function() //移开时继续自动切换 64 { 65 int=setInterval(ziDong,3000); 66 }); 67 }); 68 </script> 69 </body> 70 </html>