基于jQuery实现淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用ul替换了之前用的div。
html结构如下：
<divid="container"> <ulclass="pic"> <li><ahref="javascript:;"><imgsrc="DSC01627.jpg"alt="pic1"></a></li> <li><ahref="javascript:;"><imgsrc="DSC01628.jpg"alt="pic2"></a></li> <li><ahref="javascript:;"><imgsrc="DSC02637.jpg"alt="pic3"></a></li> </ul> <ulid="position"> <liclass="cur"></li> <liclass=""></li> <liclass=""></li> </ul> <ahref="javascript:;"id="prev"class="arrow"><</a> <ahref="javascript:;"id="next"class="arrow">></a> </div>
css设置：
*{
margin:0;
padding:0;
text-decoration:none;
}
ul{
list-style:none;
}
#container{
position:relative;
width:400px;
height:200px;
margin:20pxauto;
}
.picli{
position:absolute;
top:0;
left:0;
display:none;
}
.picliimg{
width:400px;
height:200px;
}
#position{
position:absolute;
bottom:0;
right:0;
margin:0;
background:#000;
opacity:0.4;
width:400px;
text-align:center;
}
#positionli{
width:10px;
height:10px;
margin:02px;
display:inline-block;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#afafaf;
}
#position.cur{
background-color:#ff0000;
}
.arrow{
cursor:pointer;
display:none;
line-height:39px;
text-align:center;
font-size:36px;
font-weight:bold;
width:40px;
height:40px;
position:absolute;
z-index:2;
top:50%;
margin-top:-20px;/*width的一半*/
background-color:RGBA(0,0,0,.3);
color:#fff;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);
}
#container:hover.arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
JavaScript代码：
$(function(){
//第一张显示
$(".picli").eq(0).show();
//鼠标滑过手动切换，淡入淡出
$("#positionli").mouseover(function(){
$(this).addClass('cur').siblings().removeClass("cur");
varindex=$(this).index();
i=index;//不加这句有个bug，鼠标移出小圆点后，自动轮播不是小圆点的后一个
//$(".picli").eq(index).show().siblings().hide();
$(".picli").eq(index).fadeIn(500).siblings().fadeOut(500);
});
//自动轮播
vari=0;
vartimer=setInterval(play,2000);
//向右切换
varplay=function(){
i++;
i=i>2?0:i;
$("#positionli").eq(i).addClass('cur').siblings().removeClass("cur");
$(".picli").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//向左切换
varplayLeft=function(){
i--;
i=i<0?2:i;
$("#positionli").eq(i).addClass('cur').siblings().removeClass("cur");
$(".picli").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//鼠标移入移出效果
$("#container").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(play,2000);
});
//左右点击切换
$("#prev").click(function(){
playLeft();
})
$("#next").click(function(){
play();
})
})
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。