JQ H5 carousel

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>H5 carousel</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<style type="text/css">
#banner { position: relative; width: 478px; height: 286px; margin: 20px auto; overflow: hidden; }
#bannerList img { border: 0px; }
#bannerTitBg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; }
#bannerTit { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }
#bannerText { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; }
#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; }
#banner ul li { width:20px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; float: left; display: block; color: #FFF; background: #f60; font-size: 12px; margin-left: 2px;}
#banner ul li.banner-on { background-color: #06f; }
#bannerList a { position: absolute; }
</style>
<script type="text/javascript">
var t = n =0, count;
$(function(){
	count=$("#bannerList a").length;
	$("#bannerList a:not(:first-child)").hide();
	$("#bannerTit").html($("#bannerList a:first-child").find("img").attr('alt'));
	$("#bannerTit").click(function(){
		window.open($("#bannerList a:first-child").attr('href'), "_blank")
	});
	$("#banner li").click(function() {
		var i = $(this).text() -1;
		n = i;
		if (i >= count) return;
		$("#bannerTit").html($("#bannerList a").eq(i).find("img").attr('alt'));
		$("#bannerTit").unbind().click(function(){window.open($("#bannerList a").eq(i).attr('href'), "_blank")})
		$("#bannerList a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
		document.getElementById("banner").style.background="";
		$(this).toggleClass("banner-on");
		$(this).siblings().removeAttr("class");
	});
	t = setInterval("showAuto()", 4000);
	$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
});
function showAuto(){
	n = n >=(count -1) ?0 : ++n;
	$("#banner li").eq(n).trigger('click');
}
</script>
</head>
<body>
<div id="banner">
	<div id="bannerTitBg"></div>
	<div id="bannerTit"></div>
	<ul>
		<li class="banner-on">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<div id="bannerList">
		<a href="#" target="_blank"><img src="img/p1.jpg" title="tit描述1" alt="alt描述1"></a>
		<a href="#" target="_blank"><img src="img/p2.jpg" title="tit描述2" alt="alt描述2"></a>
		<a href="#" target="_blank"><img src="img/p3.jpg" title="tit描述3" alt="alt描述3"></a>
		<a href="#" target="_blank"><img src="img/p1.jpg" title="tit描述4" alt="alt描述4"></a>
	</div>
</div>
</body>
</html>
Effect picture:
Guess you like
