刚开始学习JQ，试着自己写了一个轮播图。
HTML部分
轮播效果图 - 锐客网
<
>CSS部分
*{margin: 0;
padding: 0;
}
#banner{
margin: 0 auto;
background: #ebebeb;
width: 600px;
height: 300px;
}
#banner ul{
position: absolute;
width: 600px;
height: 300px;
overflow: hidden;
}
#banner li{
display: none;
}
#banner img{
width: 600px;
height: 300px;
}
#banner .b-btn{
display: inline-block;
height: 300px;
width: 100px;
font: 70px/300px '微软雅黑';
text-align: center;
color: #8B7B8B;
opacity: 0.2;
/*防止双击的时候出现蓝底*/
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#banner .b-btn:hover{
background: #cdc1c5;
color: #f8f8ff;
opacity: 0.5;
cursor: pointer;
}
#banner .right{
float: right;
}JS部分
var time;
var num=$('#banner li').length;
var b_num=1;
//初始设置显示第一张轮播图
$('#banner li').eq(0).show();
//轮播图自动切换
function bannerMove(){
time=setInterval(function(){
//轮播图淡入淡出
$('#banner li').eq(b_num%num).fadeIn(500).siblings('li').fadeOut(200);
b_num++;
},3000)
};
bannerMove();
//开始自动轮播//鼠标移入图片和左右按钮时停止自动播放
$('#banner li,#banner .right,#banner .left').mouseover(function(){
clearInterval(time)
});
//鼠标移出图片和左右按钮时开始自动播放
$('#banner li,#banner .right,#banner .left').mouseout(function(){
bannerMove()
});
//点击右键切换图片
$('#banner .right').click(function(){
$('#banner li').eq(b_num%num).fadeIn(500).siblings('li').fadeOut(200);
b_num++;
})
//点击左键切换图片
$('#banner .left').click(function(){
if (b_num%num==0) {
b_num=3;
}
$('#banner li').eq(b_num-2%num).fadeIn(500).siblings('li').fadeOut(200);
b_num--;
});
【初学JQ之轮播图】希望大家能够多多指出错误和不够完善的地方，谢谢。
