js实现无缝轮播图插件封装实现无缝轮播图插件封装
前言:前言:页面中轮播图,对于一个前端开发者来说,是最基本的技能,不论是的商城网站,还是企业站,轮播图已经成为不可缺
少的一个模块,而常见的轮播图不外乎两种,一种是渐隐渐现轮播图,一种是无缝轮播图。网上关于轮播图的件也有很多,但
是用人家的代码总会出现各种各样的bug,我们修改bug往往要耗费很多时间,而且有些插件的效果还不符合我们的需求,那
么我们该如何封装一个自己的轮播插件呢?这就是我们今天的任务,封装轮播插件。
1、特效离不开合理的页面布局,所以我们首先需要进行页面布局:
HTML代码:
<div class="container mycontainer">
<div class="wrapper">
<div class="slide">
<img src="image/jd01.jpg" alt="">
</div>
<div class="slide">
<img src="image/jd02.jpg" alt="">
</div>
<div class="slide">
<img src="image/jd03.jpg" alt="">
</div>
<div class="slide">
<img src="image/jd04.jpg" alt="">
</div>
</div>
<!-- 分页器 -->
<ul class="pagination"></ul>
<!-- 导航按钮 -->
<div class="button-pre"></div>
<div class="button-next"></div>
</div>
2、在HTML页面中引入css样式文件:css样式文件代码如下:
CSS代码:
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.container {
margin: 200px auto;
position: relative;
overflow: hidden;
}
.slide {
float: left;
}
img {
display: block;
}
.pagination {
width: 160px;
position: absolute;
bottom: 30px;
margin-left: -80px;
left: 50%;
}
.pagination li {
float: left;