1、第一步创建一个HTML，准备好相关的banner的图片素材：
2、第二步这里准备四张图片，需要在banner中展示：
3、第三步HTML中的css相关代码：<style type="text/cs衡痕贤伎s">#banner { position: relative; width: 478px; height: 286px; border: 1px solid #666; overflow: hidden; }#banner_list img { border: 0px; }#banner_bg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; }#banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }#banner_text { 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 { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }#banner ul li.on { background-color: #000; }#banner_list a { position: absolute; }<!--让四张图片都可以重叠在一起--></style>
4、第四步这里贴出来，js的相关代码：<script type="text/javascript">var t = n = 0,count;$(document).ready(function() {count = $("#banner_list a").length;$("#banner_list a:not(:first-child)").hide();$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));$("#banner_info").click(function() {window.open($("#banner_list a:first-child").attr('href'), "_blank")});$("#banner li").click(function() {var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4n = i;if (i >= count) return;$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));$("#banner_info").unbind().click(function() {window.open($("#banner_list a").eq(i).attr('href'), "_blank")}) ; $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);document.getElementById("banner").style.background = "";$(this).toggleClass("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>
5、第五步测试看效果：
