親手寫出來的模仿http://ke.qq.com/ 中的banner圖切換 ，并添加了自動切換效果
代碼中的圖檔 可以到上面網址中下載下傳，注意圖檔命名，和引入jquery的版本
代碼如下：
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
<title>banner change demo</title>
<style type="text/css">
*{margin:0;padding:0;}
img{border:0px;}
.banner{width:100%;height:350px;
margin-top:30px;
}
.banner .b_bg{
width:100%;
height:300px;
background:#66f;
}
.banner .b_bg .b_con{
width:1200px;
height:300px;
margin:0 auto;
}
.banner .b_bg .b_con .b_focus{
width:760px;
height:300px;
margin:0 auto;
overflow:hidden;
position:relative;
}
.banner .b_bg .b_con .b_focus:hover .b_ear{
display:block;
}
.banner .b_bg .b_con .b_focus ul{
list-style:none;
}
.banner .b_bg .b_con .b_focus .b_btn{
position:absolute;
bottom:10px;
left:330px;
width:136px;
height:24px;
border-radius:12px;
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
}
.banner .b_bg .b_con .b_focus .b_btn ul{
display:inline-block;
padding:7px 28px;
}
.banner .b_bg .b_con .b_focus .b_btn ul li{
border:1px solid #fff;
list-style:none;
float:left;
width:8px;
height:8px;
margin:0 3px;
border-radius:4px;
cursor:pointer;
}
.banner .b_bg .b_con .b_focus .b_ear{
width:46px;
height:70px;
display:block;
position:absolute;
top:115px;
display:none;
}
.banner .b_bg .b_con .b_focus .pre{
left:0;
background:url("images/all.png") no-repeat -98px -109px;
}
.banner .b_bg .b_con .b_focus .pre:hover{
background-position:0 -109px;
}
.banner .b_bg .b_con .b_focus .next{
right:0;
background:url("images/all.png") no-repeat -148px -109px;
}
.banner .b_bg .b_con .b_focus .next:hover{
background-position:-50px -109px;
}
.on{background:#fff};
</style>
</head>
<body>
<div class="banner">
<div class="b_bg">
<div class="b_con">
<div class="b_focus" id="b_focus">
<!--images start-->
<ul id="b_pic">
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="images/1.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="images/2.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="images/3.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="images/4.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img src="images/5.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
</ul>
<!--end images-->
<!--b_btn start-->
<div class="b_btn">
<ul id="b_btn_mini">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--end b_btn-->
<!--ear start-->
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="b_ear pre" id="b_pre_ear"></a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="b_ear next" id="b_next_ear"></a>
<!--end ear-->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jQuery_v1_11_1.js">
</script>
<script type="text/javascript">
$(function(){
//全局圖檔和小按鈕index (很重要)
var _index = 0;
//定義定時器
var autochangeTimer = null;
//聚焦區域的滑鼠事件
$('#b_focus').mouseover(function(){
window.clearInterval(autochangeTimer);
}).mouseout(function(){
autochangeTimer = setInterval(function(){
if(_index > 4){
_index = 0;
}
$('#b_btn_mini').find('li').eq(_index).addClass('on').siblings().removeClass('on');
$("#b_pic").find("li").eq(_index++).fadeIn("slow").siblings().hide();
},1000);
});
//打開網頁時候讓定時器run起...
$('#b_focus').mouseout();
//輪展圖切換
$('#b_btn_mini').find('li').mouseover(function(){
//控制小按鈕
$(this).addClass('on').siblings().removeClass('on');
//關聯 （圖檔和小按鈕）
_index = $(this).index();
$("#b_pic").find("li").eq(_index).fadeIn("slow").siblings().hide();
});
//切換到前一副圖檔事件
$("#b_pre_ear").click(function(){
setCurrentIndex();
if(_index > 0){
$('#b_btn_mini').find('li').eq(--_index).mouseover();
}
$(this).mouseover();
});
//當切換到第一張圖檔時候修改<a pre>樣式
$("#b_pre_ear").mouseover(function(){
setCurrentIndex();
if(_index < 1){
$(this).css("cursor","none");
}else{
$(this).css("cursor","pointer");
}
});
//切換到後一副圖檔事件
$("#b_next_ear").click(function(){
setCurrentIndex();
if(_index < 4){
$('#b_btn_mini').find('li').eq(++_index).mouseover();
}
$(this).mouseover();
});
//當切換到最後一張圖檔時候修改<a next>樣式
$("#b_next_ear").mouseover(function(){
setCurrentIndex();
if(_index > 3){
$(this).css("cursor","none");
}else{
$(this).css("cursor","pointer");
}
});
//設定_index為目前圖檔的index
function setCurrentIndex(){
_index = $('#b_btn_mini').find('li.on').index();
}
});
</script>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)