亲手写出来的模仿http://ke.qq.com/ 中的banner图切换 ，并添加了自动切换效果
代码中的图片 可以到上面网址中下载，注意图片命名，和引入jquery的版本
代码如下：
<!DOCTYPE HTML>
<html lang="en-US">
<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="#">
<img src="images/1.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="xueyuan" height="300px" width="760px"/>
</a>
</li>
<li>
<a href="#">
<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="#" class="b_ear pre" id="b_pre_ear"></a>
<a href="#" 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>
原文地址：http://blog.csdn.net/pleasurehappy/article/details/44729265
