html banner图片滚动,jQuery实现的网站banner图片无缝轮播效果完整实例

本文实例讲述了jQuery实现的网站banner图片无缝轮播效果。分享给大家供大家参考，具体如下：

图片轮播

html,body{

padding: 0;

margin: 0;

}

ul,ul li{

list-style: none;

margin: 0;

padding: 0;

}

.box{

}

#banner{

position: relative;

height:auto;

overflow: hidden;

}

#banner ul{

position:absolute;

}

#banner ul li{

float: left;

}

#banner ul li img{

width: 100%;

height: 100%;

}

#banner #prevBtn,#banner #nextBtn{

height:80px;

width:30px;

background:rgba(0,0,0,0.5);

position:absolute;

top:50%;

margin-top:-40px;

font-size:30px;

line-height:80px;

text-align:center;

text-decoration:none;

color:white;

opacity: 0;

transition: opacity 0.8s ease;

}

#banner #prevBtn{

left:0;

}

#banner #nextBtn{

right:0;

}

#banner:hover #prevBtn,#banner:hover #nextBtn{

opacity: 1;

}

.dot{

height:10px;

width:10px;

border-radius:10px;

background:#2196f3;

display:inline-block;

margin:5px;

}

.on{

background: #009688;

}

•