代码部分：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{margin:0px; padding:0px;}
.flash{100%; height:400px; overflow:hidden;
position:relative;color:#fff;}
.flash ul.con li{list-style-type:none;100%; height:400px;
position:absolute; left:0px; top:0px;}
.flash ul.but{ 200px; position:absolute;top:350px; left:45%; z-index:222;}
.flash ul.but li{13px; height:13px; display:inline-block;float:left;background:url("images/dot.png") -13px 0px; margin:0 5px;}
.flash ul.but li.current{background:url("images/dot.png") 0px 0px;}
</style>
</head>
<body>
<div class="flash">
<ul class="con">
<li style="background:url('images/img1.jpg') center;">0</li>
<li style="background:url('images/img2.jpg') center">1</li>
<li style="background:url('images/img3.jpg') center">2</li>
<li style="background:url('images/img4.jpg') center">3</li>
</ul>
<!-- <ul class='but'>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul> -->
<!-- 小图标 -->
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
//没有图标版
$(function(){
index=-1;
Time = setInterval(function(){
index++;
if(index==3){
index=-1;
}
$('.con li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
},3000);
})
</script>
<!--
小图标版
<script type="text/javascript">
var index = 0;
var times;
var nowIndex=0;
time=setInterval(function times(){
index++;
if(index>3){index=0}
$(".con li").eq(index).fadeIn().siblings().fadeOut();
$(".but li").eq(index).addClass('current').siblings().removeClass('current');
},3000);
$('.but li').mouseover(function(){
clearInterval(time);
$(this).addClass('current').siblings().removeClass('current');
$(".con li").eq($(".but li").index($(this))).fadeIn().siblings().fadeOut();
})
$('.but li').mouseout(function(){
index=-1;
time=setInterval(function times(){
index++;
if(index>3){
index=0}
$(".con li").eq(index).fadeIn().siblings().fadeOut();
$(".but li").eq(index).addClass('current').siblings().removeClass('current');
},3000);
})
</script>
-->
</body>
</html>