js实现淡入淡出轮播切换功能
话不多说，请看代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/*最小宽度这样图片就可以自适应居中*/
.warp{
min-width:900px;
width:100%;
height:600px;
margin:0auto;
}
#banner{
position:relative;
}
ul{
position:relative;
width:100%;
height:600px;
overflow:hidden;
}
ulli{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:600px;
text-align:center;
}
.cur{
position:absolute;
bottom:20px;
text-align:center;
width:100%;
height:40px;
line-height:40px;
}
.curspan{
display:inline-block;
width:20px;
height:20px;
background:#000;
}
.curspan.active{
background:blue;
}
.btn{
position:absolute;
top:50%;
width:50px;
height:100px;
line-height:100px;
text-align:center;
margin-top:-50px;
color:#fff;
font-size:18px;
background:rgba(0,0,0,0.9)
}
.btnLeft{
left:0;
}
.btnRight{
right:0;
}
img{
width:900px;
height:600px;
}
</style>
</head>
<body>
<divclass="warp">
<divclass="lunbo"id="banner">
<ul>
<listyle="background:red;display:block">全屏渐变图片自适应居中</li>
<listyle="background:green">全屏渐变图片自适应居中</li>
<listyle="background:yellow">全屏渐变图片自适应居中</li>
</ul>
<!--如果两个按钮在图片的外面只需要把按钮移到外面然后在js里添加按钮移入清除定时器事件-->
<divclass="btnbtnLeft"><</div>
<divclass="btnbtnRight">></div>
</div>
</div>
<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
varnum=0;
varbtnLeft=$(".btnLeft");
varbtnRight=$(".btnRight");
varId=$("#banner");
varoUl=Id.find("ul");
varoLi=oUl.find("li");
varoLiLen=oLi.length;
varcurHtml="<divclass='cur'></div>";
Id.append(curHtml);
varoCur=$(".cur");
//动态添加小圆点
for(vari=0;i<oLiLen;i++){
varcurA="<span></span>"
oCur.append(curA);
}
varoCurSpan=oCur.find("span");
varoCurS=oCur.find("span:first");
oCurS.addClass('active')
//自动轮播
vart=setInterval(function(){
num++;
lunbo();
},3000);
//移动到轮播清除定时器
Id.hover(function(){
clearInterval(t)
},function(){
t=setInterval(function(){
num++;
lunbo();
},3000);
});
//左箭头按钮
btnLeft.on("click",function(){
num--;
lunbo();
})
//右箭头按钮
btnRight.on("click",function(){
num++;
lunbo();
})
functionlunbo(){
if(num==oLiLen){
num=0;
}
oLi.eq(num).fadeIn().siblings().fadeOut();
oCurSpan.eq(num).addClass('active').siblings().removeClass('active');
}
lunbo();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！