/**************【css】****************/
<style type="text/css">
*{margin:0px;padding:0px;}
.banner{width:100%;height:300px;background:rgb(63,12,9);position:relative;}
.cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;}
.cont ul li{list-style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;}
.cont .prev{width:50px;height:55px;position:absolute;top:100px; left:0px;background:url("images1/button-prev-next.png");background-position:60px -140px;display:none;cursor:pointer;}
.cont .next{width:50px;height:55px;position:absolute;top:100px; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;}
.motbig{width:175px;height:17px;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;}
.motbig ul li{list-style-type:none;width:12px;height:12px;border:1px #ffffff solid;float:left;margin:1px 5px;border-radius:50%;cursor:pointer;}
.motbig ul li.hover{background:#fff;}
</style>
/*****************************/
/************【布局】*************/
<div class="banner">
<div class="cont">
<ul>
<li style="display:block;" barbg="rgb(63,12,9)">
<img src="../images1/1.jpg" alt="" />
</li>
<li barbg="rgb(4, 28, 98)">
<img src="../images1/2.jpg" alt="" />
</li>
<li barbg="rgb(134, 162, 210)">
<img src="../images1/3.png" alt="" />
</li>
<li barbg="rgb(215, 222, 228)">
<img src="../images1/4.jpg" alt="" />
</li>
<li barbg="rgb(140, 150, 212)">
<img src="../images1/5.jpg" alt="" />
</li>
<li barbg="rgb(12, 18, 34)">
<img src="../images1/6.jpg" alt="" />
</li>
<li barbg="rgb(56, 162, 210)">
<img src="../images1/7.jpg" alt="" />
</li>
</ul>
<div class="prev"></div>
<div class="next"></div>
</div>
<div class="motbig">
<ul>
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
/*******************************************/
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
/************【js】*******************/
<script type="text/javascript">
var _index = 0;
var time;
//点击小圆点按钮切换图片
$(".motbig ul li").click(function () {
$(this).addClass("hover").siblings().removeClass("hover");
_index = $(this).index(); //获取当前序号
play(_index);
})
//向左切换
$(".cont .prev").click(function () {
_index--;
if (_index < 0) { _index = 6; }
play(_index);
$(".motbig ul li").eq(_index).addClass("hover").siblings().removeClass("hover");
})
//向右切换
$(".cont .next").click(function () {
autoPaly();
})
function autoPaly() {
_index++;
if (_index > 6) { _index = 0; }
play(_index);
$(".motbig ul li").eq(_index).addClass("hover").siblings().removeClass("hover");
}
function play(_index) {
var bg = $(".cont ul li").eq(_index).attr("barbg");
$(".banner").css({ background: bg });
$(".cont ul li").eq(_index).fadeIn().siblings().fadeOut();
}
//移动到banner区域显示左右切换按钮，移开banner区域隐藏左右切换按钮
$(".cont").hover(function () {
$(".cont .prev").show();
$(".cont .next").show();
clearInterval(time);
}, function () {
$(".cont .prev").hide();
$(".cont .next").hide();
time = setInterval("autoPaly()", 3000);
});
time=setInterval("autoPaly()", 3000);
</script>
/*****************************/
效果：
