轮播效果

//css代码

.banner{width:100%;height:768px;position:absolute;padding:0;margin:0;}
.banner .list{width:100%;height:768px;overflow:hidden;position:absolute;z-index:1;list-style-type:none;padding:0;margin:0;}
.banner .list li{width:100%;height:768px;left:0px;top:0px;display:none;margin-left:auto;margin-right:auto;}

.banner .list li.bg1{background: url(../images/banner.jpg) no-repeat center top;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	padding-top:1.5em;
    z-index: 1;}

.banner .btn{ width:30px; height:100px;position:relative;top:40%;right:15%;float:right;z-index:100;}
.banner .btn li{margin-top:10px;margin-left:12px;background:url("../images/dot2.png") no-repeat center center;text-indent:-999em;float:left;width:20px;height:20px;cursor:pointer;border-radius:50%;}
.banner .btn li.hover{background:url("../images/dot1.png") no-repeat center center;}

.banner .list li.bg2 {background: url(../images/banner1.jpg) no-repeat center top;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	padding-top:1.5em;
    z-index: 1;}

.banner-btn {
    width:1580px;
    height:768px;
    margin-left:auto;
    margin-right:auto;
}

//html代码

<div class="banner" style="width:100%;min-width:1000px;">

<ul class="list">

<li class="bg1" style="display: list-item;"></li>

<li class="bg2" style="display: none; z-index: 1;"></li>

</ul>

  <div class="banner-btn">

<ul class="btn"></ul>

  </div>

</div>

//js代码

$(function(){
	function banner(){
		var index = 1;
		var len = $(".banner .list li").length;
		var time;
		
		for(i=1;i<=len;i++){
			var Obtn = $("<li>"+i+"</li>").appendTo($(".banner .btn"));
			}
		$(".banner .btn li").eq(0).addClass('hover');
		$(".banner .list li").eq(0).css("z-index","1");
		$(".banner .btn li").mouseover(function(){
				index = $(".banner .btn li").index(this);
				show(index);							
			})
		time = setInterval(function(){
				show(index);
				index++;
				if(index==len){index = 0}
			},5000);
		
		function show(index){
			$(".banner .list li p").removeClass('hover');
			$(".banner .list li").eq(index).find("p").addClass('hover');

			$(".banner .btn li").eq(index).addClass('hover').siblings("li").removeClass('hover');
			$(".banner .list li").eq(index).fadeIn(900).siblings("li").fadeOut(600);
		}
	}
	banner();
})