个人博客—轮播器
- 轮播器自动轮播，每张图片淡入淡出
- 控制按钮和图片描述跟随图片轮播
- 鼠标悬停图片上方则停止轮播，滑出后从当前图片继续轮播
- 鼠标滑到控制器上方则对应图片显示，且停止轮播，滑出后从当前图片继续轮播
轮播器
html部分
<div id="banner">
<a href="#"><img class="img_on" src="img/banner1.jpg" alt="轮播器第一张" /></a>
<a href="#"><img src="img/banner2.jpg" alt="轮播器第二张" /></a>
<a href="#"><img src="img/banner3.jpg" alt="轮播器第三张" /></a>
<ul>
<li class="control_on"></li>
<li></li>
<li></li>
</ul>
<span></span>
<strong></strong>
</div>
js部分
var cur_index = 0, //当前控制按钮
img_list = $("#banner img"), //图片组
img_list_length = img_list.length,
control_list = $("#banner ul li"); //控制组
$('#banner strong').html($(img_list).first().attr('alt'));
$(img_list).fadeOut();
banner_to(cur_index);
// 定时器每3秒自动变换一次banner
var banner_timer = setInterval(function(){
if(cur_index < img_list_length -1){
cur_index ++;
}else{
cur_index = 0;
}
//调用变换处理函数
banner_to(cur_index);
},3000);
//调用控制按钮点击和鼠标悬浮事件处理函数
addEvent();
function addEvent(){
for(var i=0;i<img_list_length;i++){
//闭包防止作用域内活动对象的影响
(function(j){
//鼠标悬浮图片上方则清除定时器
$(control_list[j]).on("mouseover",function(){
if(cur_index == j){
clearTimeout(banner_timer);
}else {
clearTimeout(banner_timer);
banner_to(j);
cur_index = j;
}
});
//鼠标滑出图片则重置定时器
$(control_list[j]).on("mouseout",function(){
banner_timer = setInterval(function(){
if(cur_index < img_list_length -1){
cur_index ++;
}else{
cur_index = 0;
}
//调用变换处理函数
banner_to(cur_index);
},3000);
});
})(i);
(function(j){
//鼠标悬浮图片上方则清除定时器
$(img_list[j]).on("mouseover",function(){
clearTimeout(banner_timer);
cur_index = j;
});
//鼠标滑出图片则重置定时器
$(img_list[j]).on("mouseout",function(){
banner_timer = setInterval(function(){
if(cur_index < img_list_length -1){
cur_index ++;
}else{
cur_index = 0;
}
//调用变换处理函数
banner_to(cur_index);
},3000);
});
})(i);
}
}
//变换处理函数
function banner_to(num){
$("#banner .img_on").fadeOut().removeClass("img_on"); //淡出当前banner
$(img_list[num]).fadeIn().addClass("img_on"); //淡入目标banner
$('#banner strong').html($($(img_list)[num]).attr('alt'));
//设置banner的控制按钮
$("#banner .control_on").removeClass("control_on");
$(control_list[num]).addClass("control_on");
}
<b><big>代码在Github：个人博客</big></b>
