<!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="jquery-1.8.3.min.js"></script>
<style type="text/css">
.con{500px;height:500px;border:1px solid #ccc;position:relative;}
.pic{500px;height:500px;position:relative;}
img{position:absolute;left:0;top:0;display:none;}
a{text-decoration:none;50px;height:50px;border:1px solid #000;color:#000;line-height:50px;text-align:center;position:absolute;}
.pre{left:10px;top:225px;}
.next{right:10px;top:225px;}
ul{300px;height:15px;line-height:15px;font-size:12px;color:#f00;position:absolute;right:0;bottom:0;}
ul li{15px;height:15px;text-align:center;float:left;list-style-type:none;border:1px solid #f00;margin-right:10px;}
ul li.cur{background:#ccc;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var n=0;
var index_=$(".pic img").index();
$(".pre").click(function(){
if(n>0){
n--;
}else{
n = index_
}
$(".pic img:eq("+ n +")").fadeIn().siblings().fadeOut();
$("ul li:eq("+ n +")").addClass("cur").siblings().removeClass("cur");
});
$(".next").click(function(){
if(n<index_){
n++;
}else{
n=0
}
$(".pic img:eq("+ n +")").fadeIn().siblings().fadeOut();
$("ul li:eq("+ n +")").addClass("cur").siblings().removeClass("cur");
})
$("ul li").each(function(){
var this_ = $(this);
this_.click(function(){
n = this_.text()-1;
$(this).addClass("cur").siblings().removeClass("cur");
$(".pic img:eq("+ n +")").fadeIn().siblings().fadeOut();
})
})
//setInterval(function(){
// if(n<index_){
// n++;
// }else{
// n=0
// }
// $(".pic img:eq("+ n +")").fadeIn().siblings().fadeOut();
// $("ul li:eq("+ n +")").addClass("cur").siblings().removeClass("cur");
//},1500)
})
</script>
</head>
<body>
<div class="con">
<div class="pic">
<img src="1.jpg" alt="" style="display:block;"/>
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
<a href="javascript:void(0);" class="pre"><</a>
<a href="javascript:void(0);" class="next">></a>
<ul>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>