效果如下：
all code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq淡入淡出全屏轮播效果</title>
<style>
*{margin:0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;}
.block{display: block;}
.none{display: none;}
#bannerBg{width: 100%;height: 300px;}
#bannerBg .banner{width: 760px;height: 300px;margin: 0 auto;overflow: hidden;position: relative;}
#bannerBg .banner ul.pic_list{width: 20000%;}
#bannerBg .banner ul li{float:left;}
#bannerBg .banner ul.btn_list{padding:5px 10px;position: absolute;z-index: 9999;background: rgba(0,0,0,.5);border-radius:10px;left: 50%;bottom: 20px;margin-left: -42px;}
#bannerBg .banner ul.btn_list li{width: 10px;height: 10px;border-radius:50%;border:1px solid #fff;margin-left: 5px;cursor: pointer;}
#bannerBg .banner ul.btn_list li.checked{background: #fff;}
#bannerBg .banner .banner_btn{position: absolute;background: url('images/button.png') no-repeat;width: 46px;height: 70px;display: block;z-index:99999;top:50%;margin-top:-35px;}
#bannerBg .banner .next{right:0px;background-position: -48px -128px;display: none;}
#bannerBg .banner .prev{background-position: 0px -128px;display: none;}
#bannerBg .banner .prev:hover{background-position: -133px 5px;}
#bannerBg .banner .next:hover{background-position: -181px 5px;}
.bg4{background: #D6DBE1}
.bg0{background: #2387D3}
.bg1{background: #59AE47}
.bg2{background: #161938}
.bg3{background: #36A0D0}
</style>
</head>
<body>
<div id="bannerBg" class="bg0">
<div class="banner">
<ul class="pic_list">
<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
</ul>
<ul class="btn_list">
<li class="checked"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:void(0)" class="next banner_btn"></a>
<a href="javascript:void(0)" class="prev banner_btn"></a>
</div>
</div>
</body>
</html>
<script src="js/jquery-2.1.4.js"></script>
<script>
window.onload = function(){
var i = 0;
var leng = $('ul.pic_list li').length;
$('a.next').click(function(){
clickNext();
});
$('a.prev').click(function(){
i--;
if(i<0){
i=leng-1;
}
$('ul.pic_list li').stop().eq(i).fadeIn().siblings().stop().hide();
$('ul.btn_list li').eq(i).addClass('checked').siblings().removeClass('checked');
$('#bannerBg').addClass('bg'+i).removeClass('bg'+((i+1)>4?0:(i+1)));
});
$('.banner').hover(function(){
set = clearInterval(set);
$('.banner a.next,.banner a.prev').css('display','block');
},function(){
$('.banner a.next,.banner a.prev').css('display','none');
set = setInterval(clickNext,2000)
});
$('ul.btn_list li').click(function(){
i = $(this).index();
$('ul.pic_list li').stop().eq(i).fadeIn().siblings().stop().hide();
$(this).addClass('checked').siblings().removeClass('checked');
$('#bannerBg').addClass('bg'+i).removeClass('bg'+((i+1)>4?0:(i+1)));
});
var set = setInterval(clickNext,2000);
function clickNext(){
i++;
if(i>leng-1){
i=0;
}
$('ul.pic_list li').eq(i).fadeIn(600).siblings().hide();
$('ul.btn_list li').eq(i).addClass('checked').siblings().removeClass('checked');
$('#bannerBg').addClass('bg'+i).removeClass('bg'+((i-1)<0?4:(i-1)));
}
}
</script>