本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下：
1.HTML 框架搭建（css代码里宽高的大小与图片的大小一致）
css部分：
* {
padding: 0;
margin:0;
}
ul {
list-style: none;
}
.out {
width: 640px;
height: 270px;
margin:50px auto;
position: relative;
}
.out img{
width: 640px;
height: 270px;
}
.out .img li {
position: absolute;
left:0;
top:0;
display: none;
}
.out .num {
position: absolute;
bottom: 20px;
left: 0;
font-size:0px;
text-align:center;
width: 100%;
}
.out .num li {
width: 20px;
height: 20px;
line-height:20px;
border-radius:50%;
background:#666;
color: #fff;
text-align:center;
display: inline-block;
font-size:16px;
margin:0 3px;
cursor: pointer;
}
.out .num li.active {
background:#a00;
}
.out .btn {
position:absolute;
top: 50%;
margin-top:-30px;
width: 30px;
height: 60px;
line-height:60px;
background:rgba(0,0.5);
font-size:40px;
color: #fff;
text-align:center;
display: none;
}
.out .left {
left: 0;
}
.out .right {
right: 0;
}
.out:hover .btn {
display: block;
cursor: pointer;
}
HTML部分：
