<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#flash{width:100%;height:400px;position:relative;}
#flash .Con{width:100%;height:400px;position:relative;}
#flash .Con .box{width:100%;height:400px;position:absolute;left:0px;top:0px;}
#flash ul.button{width:100px;height:30px;position:absolute;left:49%;bottom:0;z-index:10000;}
#flash ul.button li{width:13px;height:13px;list-style:none;float:left;margin:0 5px;background:url("img/dot.png") -13px 0px;}
#flash ul.button li.hover{background:url("img/dot.png") 0px 0px;}
</style>
</head>
<body>
<div id="flash">
<div class="Con">
<div class="box" style="background:url(‘img/img1.jpg‘) center; z-index:1000;"></div>
<div class="box" style="background:url(‘img/img2.jpg‘) center"></div>
<div class="box" style="background:url(‘img/img3.jpg‘) center"></div>
<div class="box" style="background:url(‘img/img4.jpg‘) center"></div>
</div>
<ul class="button">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var _index=0;
var setTime=null;
$("ul.button li").mouseover(function(){
clearInterval(setTime);//清除定时器
$(this).addClass("hover").siblings("li").removeClass("hover");//添加hover;
_index=$(this).index();//获取当前序列号
//alert(_index);
$(".Con .box").eq(_index).fadeIn().siblings(".box").fadeOut();//show() hide()
});
$("ul.button li").mouseout(function(){
autoPlay();
});
function autoPlay(){
setTime=setInterval(function(){
//alert("我是定时器");
_index++;//_index+1;
if(_index>3){_index=0;}
$("ul.button li").eq(_index).addClass("hover").siblings("li").removeClass("hover");
$(".Con .box").eq(_index).fadeIn().siblings(".box").fadeOut();
},2000);
}
autoPlay();
</script>
</body>
</html>
原文：http://www.cnblogs.com/nifengs/p/4605311.html