原生js实现无缝轮播图效果

话不多说，请看代码

 
 
 
 
 
 
 
 
 html{
 height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0
 }
 body{
 position: relative;
 min-height:100%;
 font-size:14px;
 font-family: Tahoma, Verdana,"Microsoft Yahei";
 color:#333;
 }
 a{
 text-decoration: none;
 color:#333;
 }
 .header{
 width: 960px;
 padding-top: 15px;
 margin: 0 auto;
 line-height: 30px;
 text-align: right;
 }
 .header a{
 margin: 0 5px;
 }
 .main{
 width:960px;
 margin: 50px auto 0;
 }
 .code{
 border:1px dashed #e2e2e2;
 padding:10px 5px;
 margin-bottom:25px;
 }
 pre {
 font-family: "Microsoft Yahei",Arial,Helvetica;
 white-space: pre-wrap;  
 white-space: -moz-pre-wrap;  
 white-space: -pre-wrap;  
 white-space: -o-pre-wrap;  
 word-wrap: break-word; 
 }
 .example{
 padding-top:40px;
 margin-bottom:90px;
 }
 .example .call{
 padding:18px 5px;
 background:#f0f5f8;
 }
 .example h2{
 padding-top:20px;
 margin-bottom:7px;
 }
 .example table {
 width:100%;
 table-layout:fixed;
 border-collapse: collapse;
 border-spacing: 0;
 border: 1px solid #cee1ee;
 border-left: 0;
 }
 .example thead {
 border-bottom: 1px solid #cee1ee;
 background-color: #e3eef8;
 }
 .example tr {
 line-height: 24px;
 font-size: 13px;
 }
 .example tr:nth-child(2n) {
 background-color: #f0f5f8;
 }
 .example tr th,.example tr td {
 border-left: 1px solid #cee1ee;
 word-break: break-all;
 word-wrap: break-word;
 padding:0 10px;
 font-weight: normal;
 }
 .example tr th {
 color: #555;
 padding-top: 2px;
 padding-bottom: 2px;
 text-align: left;
 }
 
 .bannerha-container{
 width: 800px;
 height: 300px;
 margin: 20px auto;
 overflow: hidden;
 position: relative;
 }
 .bannerha-wrapper{
 width: 100%;
 height: 100%;
 position: absolute;
 display: -webkit-box;
 display: box;
 }
 .bannerha-slide{
 background: #ccc;
 list-style: none;
 width: 100%;
 height: 100%;
 text-align: center;
 font-size: 18px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 }
 .bannerha-pagination{
 position: absolute;
 text-align: center;
 z-index: 10;

 bottom: 10px;
 left: 0;
 width: 100%;
 }
 .bannerha-pagination-bullet{
 width: 8px;
 height: 8px;
 display: inline-block;
 border-radius: 100%;
 background: #fff;
 opacity: .5;
 margin: 0 4px;
 }
 .bannerha-pagination-bullet-active{
 opacity: 1;
 background: #ff0;
 }
 .bannerha-button{
 width: 100px;
 height: 100%;
 position: absolute;
 top: 0;
 background-color: #333;
 z-index: 1;
 cursor: pointer;
 filter: alpha(opacity:20);
 opacity: 0.2;
 -webkit-transition: all .2s ease-in;
 -moz-transition: all .2s ease-in;
 -ms-transition: all .2s ease-in;
 -o-transition: all .2s ease-in;
 transition: all .2s ease-in;
 }
 .bannerha-button.active{
 filter: alpha(opacity:60);
 opacity: 0.6;
 }
 .bannerha-button-prev{
 left:0;
 }
 .bannerha-button-next{
 right:0;
 }
 
 


 
 项目地址
 返回首页
 
 
 
 

 
slide-1
 
slide-2
 
slide-3
 
slide-4
 
slide-5
 
 
 
 
 

 不传参数，执行默认参数，自动轮播
 
 
new bannerha("#banner1");
 
 
 

 
slide-1
 
slide-2
 
slide-3
 
slide-4
 
slide-5
 
 
 
 
 

 调整自动轮播速度和缓冲速度
 
 
new bannerha("#banner2",{
 circle: true,
 speeds: 50,
 pnBtn: true,
 autoPlay: true,
 times: 1500
 });
 
 
 

 
slide-1
 
slide-2
 
slide-3
 
slide-4
 
slide-5
 
 
 
 
 

 关闭自动轮播
 
 
new bannerha("#banner3",{
 autoPlay: false
 });
 
 
 

 
slide-1
 
slide-2
 
slide-3
 
slide-4
 
slide-5
 
 
 
 
 

 关闭左右切换按钮
 
 
new bannerha("#banner4",{
 pnBtn: false
 });
 
 
 

 
slide-1
 
slide-2
 
slide-3
 
slide-4
 
slide-5
 
 
 
 
 

 关闭底部小按钮
 
 
new bannerha("#banner5",{
 circle: false
 });
 
 
 
 调用方法：
 
new bannerha(selector,{options});
 
 options参数
 

 

 

 
参数
 
默认值
 
说明
 
 
 

 

 
circle
 
true
 
是否生成底部圆圈按钮
 
 

 
speeds
 
20
 
设置缓冲运动速度
 
 

 
pnBtn
 
true
 
是否生成左右切换按钮
 
 

 
autoPlay
 
true
 
是否自动轮播
 
 

 
times
 
3000
 
设置自动轮播间隔时间
 
 
 
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！