html全屏轮播渐变切换,js实现淡入淡出轮播切换功能

Document

*{

margin:0;

padding:0;

}

/*最小宽度 这样图片就可以自适应居中*/

.warp{

min-width:900px;

width:100%;

height: 600px;

margin:0 auto;

}

#banner{

position: relative;

}

ul{

position: relative;

width:100%;

height:600px;

overflow: hidden;

}

ul li{

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;

}

.cur span{

display: inline-block;

width: 20px;

height: 20px;

background:#000;

}

.cur span.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;

}

• 全屏渐变 图片自适应居中
• 全屏渐变 图片自适应居中
• 全屏渐变 图片自适应居中

<

>

var num=0;

var btnLeft=$(".btnLeft");

var btnRight=$(".btnRight");

var Id=$("#banner");

var oUl=Id.find("ul");

var oLi=oUl.find("li");

var oLiLen=oLi.length;

var curHtml="

Id.append(curHtml);

var oCur=$(".cur");

// 动态添加小圆点

for(var i=0;i

var curA=""

oCur.append(curA);

}

var oCurSpan=oCur.find("span");

var oCurS=oCur.find("span:first");

oCurS.addClass('active')

// 自动轮播

var t=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();

})

function lunbo(){

if(num==oLiLen){

num=0;

}

oLi.eq(num).fadeIn().siblings().fadeOut();

oCurSpan.eq(num).addClass('active').siblings().removeClass('active');

}

lunbo();