<!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> img{border:0; width:500px;height:300px;} ul,li{ list-style:none;padding:0;margin:0;} #ul_1 li { display:none; position:absolute; top:10px;left:10px;} #ul_2 { position:absolute; bottom:15px; right:15px;} .flash{width:500px;height:300px;padding:10px; background:#CCC; position:relative;} .click_out { margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#f1f1f1; color:#000; 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:#00a8ff; color:#fff; font-weight:bold; font-size:12px; cursor:pointer; display:inline-block; } </style> <script type="text/javascript"> $(function(){ var index=1; var len=$("#ul_1 li").length; var Hover; //第一张图片默认显示 $("#ul_1 li:first").show(); //切换函数 function Switch(num){ $("#ul_2 li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over"); $("#ul_1 li").fadeOut().eq(num).fadeIn(); } //判断函数 function Auto(){ if(index==len)//判断是否到最后一张图片 { index=0; } Switch(index); index++; } //调用切换函数 Hover=setInterval(Auto,4000); //移上移出效果 $("#ul_1 li").hover(function(){ clearInterval(Hover); },function(){ Hover=setInterval(Auto,4000); }) //循环li for(i=0;i<len;i++) { $("<li class='click_out'></li>").text(i+1).appendTo("#ul_2"); $("#ul_2 li:first").removeClass().addClass("click_over"); } //点击切换显示图片 $("#ul_2 li").click(function(){ var int=$("#ul_2 li").index(this); Switch(int); index=int+1; }) }) </script> </head> <body> <div class="flash"> <ul id="ul_1"> <li><img src="images/mm.jpg" /></li> <li><img src="images/gg.jpg" /></li> <li><img src="images/mm.jpg" /></li> <li><img src="images/gg.jpg" /></li> </ul> <ul id="ul_2"> </ul> </div> </body> </html>