<!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>
