效果圖：
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序列號點擊型的圖片輪播</title>
<style>
*{
margin:0;padding:0;
}
.container{
width:478px;height:286px;border:1px solid #666;position: relative;overflow: hidden;
margin:50px auto;font-family: "Microsoft Yahei";
}
.img_list img{
border:0;
}
.img_list a{
position: absolute; /*讓四張圖片都疊在一起*/
}
.tit_bg{
position: absolute;bottom:0;height:30px;width:478px;background-color:#000;filter:Alpha(opacity=30);cursor:pointer;z-index: 1000;
}
.tit{
position: absolute;bottom: 0;left:5px;height:22px;color:#fff;z-index: 1001;cursor:pointer;
}
ol{
position: absolute;bottom:3px;right:5px;list-style: none;border:1px solid #fff;filter:Alpha(opacity=80);opacity:0.8;z-index: 1002;
}
ol li{
display:block;float:left;padding:0 8px;color:#fff;border:1px solid #e5eaff;background:#6f4f67;cursor:pointer;
}
ol li.on{
background-color: #900
}
</style>
</head>
<body>
<div class="container" id="carousel">
<!-- 底部標題背景-->
<div class="tit_bg"></div>
<!-- 底部標題 -->
<div class="tit"></div>
<!-- 圖片列表 -->
<div class="img_list">
<a href="#" target="_blank">
<img src="imgs/p1.jpg" title="草莓" alt="caomei">
</a>
<a href="#" target="_blank">
<img src="imgs/p3.jpg" title="蘋果" alt="pingguo">
</a>
<a href="#" target="_blank">
<img src="imgs/p4.jpg" title="桃子" alt="taozi">
</a>
<a href="#" target="_blank">
<img src="imgs/p5.jpg" title="葡萄" alt="putao">
</a>
</div>
<!-- 序列號或點 -->
<ol>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<!-- JS -->
<script src="js/jquery.min.js"></script>
<script>
var t=n=0,count;
$(document).ready(function(){
count = $('.img_list a').length;
//初始化樣式
$('.img_list a:not(:first-child)').hide();
$('.tit').html( $('.img_list a:first-child').find('img').attr('title'));
$('.tit').click(function(){
window.open($('.img_list a:first-child').attr('href'),'_blank')
});
// 序列點點擊事件
$('ol li').click(function(){
var i = $(this).text() -1;
n = i;
if(i >= count) { return };
$('.tit').html($('.img_list a').eq(i).find('img').attr('title'));
$('.tit').unbind().click(function(){
window.open($('.img_list a').eq(i).attr('href'),'_blank')
});
$('.img_list a').filter(':visible').fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById('carousel').style.background = '';
$(this).toggleClass('on');
$(this).siblings().removeAttr('class');
});
t = setInterval('showAuto()',4000);
$('.container').hover(function(){
clearInterval(t);
},function(){
t = setInterval('showAuto()',4000);
});
});
function showAuto(){
n = n>=(count-1) ? 0 : ++n;
$('.container li').eq(n).trigger('click');
}
</script>
</body>
</html>