}
.banner-view{
position: relative;
height: 100%;
z-index: 999;
background-color: #090b22;
background-repeat: no-repeat;
}
.banner-view i{
position: relative;
display: block;
float: left;
background-repeat: no-repeat;
}
.banner-btn{
position: absolute;
width: 100%;
height: 0;
top: 45%;
font-family: "宋体";
font-size: 20px;
z-index: 999;
}
.banner-btn span{
display: block;
float: left;
width: 50px;
line-height: 50px;
text-align: center;
background-color: #27cfc3;
color: white;
cursor: pointer;
font-weight: 800;
/* position: absolute;
right:-150px; */
/* background-image: url(../../../static/images/style-index.d437fb5e.png);
background-position: -268px -18px;
width: 56px;
height: 56px; */
}
/*
.banner-btn span:first-child{
left: -150px;
} */
.banner-btn span:hover{
background-color: rgba(0,0,0,0.6);
}
.banner-btn span + span{
float: right;
}
.banner-number{
position: absolute;
bottom: 35px;
width: 100%;
height: 0;
font-size: 0;
text-align: center;
z-index: 1000;
}
.banner-number > *{
display: inline-block;
border: 2px solid #fff;
border-radius: 50%;
margin: 0 8px;
width: 10px;
height: 10px;
background-color: #00c3ff;
cursor: pointer;
}
.banner-number > *:hover,
.banner-number > *.on{
background-color: #ffc300;
}
.banner-progres{
width: 100%;
position: absolute;
bottom: 0;
height: 3px;
z-index: 1000;
}
.banner-progres i{
position: absolute;
left: 0;
top: 0;
border-radius: 3px;
display: block;
height: 100%;
width: 0;
}
</style>
// js的引用
this.obj = {
container : '#banner1',//选择容器 必选
imgs : ['https://www.easck.com/d/file/200616/20200616053555140.jpg','https://www.easck.com/d/file/200616/20200616053556141.jpg'],//图片集合 必选
size : {
width : 1200,
height : 300
},//容器的大小 可选
//行数与列数 可选
grid : {
line : 12,
list : 14
},
index: 0,//图片集合的索引位置 可选
type : 2,//切换类型 1 ， 2 可选
boxTime : 5000,//小方块来回运动的时长 可选
fnTime : 10000//banner切换的时长 可选
}
mounted () {
FragmentBanner(this.obj );
}
总结
以上所述是小编给大家介绍的vue自定义js图片碎片轮播图切换效果的实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
