H5滚动轮播插件

Posted 2021-03-01 xiewangfei123

H5滚动轮播插件

实现方式
首先 ，我们需要一个容器，在这里只需要一个div就可以了，通过div的id就可以识别该容器，代码如下

<div id="div1" style="width: 1000px;height: 400px;"></div>

 

然后我们约定数据类型，这里我们的数据类接收json对象数组，如下所示模拟四组数据

var array=[ {imgSrc:"1.jpg",title:"第一张图"},
{imgSrc:"2.jpg",title:"第二张图"},
{imgSrc:"3.jpg",title:"第三张图"},
{imgSrc:"4.jpg",title:"第四张图"}];

 

接着就是为用户提供接口，下面我们约定接口的方法名，以及需要用户传递的数据如下：

initWithObjs({
array:array,//传入json对象数组
id:"div1",//传入容器的ID
isAuto:true,//是否自动
scrollDuration:2,//设置图片滚动间隔
leftIcon:"icon1.jpg",//前翻页图标
rightIcon:"icon1.jpg",//后翻页图标
currentColor:"red",//设置分页点图选中的颜色
othersColor:"#fff"//设置其他点图颜色
});

 

好了，到此为止我们的准备工作已经完成了，下面需要开始封装方法了。首先新建一个js文件，这里取名jrscroollimg.js，创建方法initWithObjs（），并初始化所有数据

jrscroollimg.js

 

获取到这些信息数据后，下一步就是根据传递过来的数据拼接滚动视图。这里我们的思路是在用户创建的容器里面添加一个div容器，让该容器存放所有的img并占据一行依次排列(如果图片过多需要优化 ，用三张图或者四张图来代替N张图，这里不再讲述)，通过移动该大div来实现滚动效果

//2***********遍历对象获取所有的滚动条目****************
var width=parseFloat(dom.style.width)*array.length;
var height=dom.style.height;
var subdiv="<div class=‘jr_subdiv‘ style=‘-webkit-transition:all 0.5s;position:relative;left:0;top:0;width: "+width+"px;height:"+height+"px‘>";
for(var i=0;i<array.length;i++){
var temObj=array[i];
var temStr="<img src=‘"+temObj.imgSrc+"‘ style=‘width: "+dom.style.width+"px;height:"+height+"px‘>";
subdiv+=temStr;
}
subdiv+="</div>";

 

通过开启定时器来实现页面的位置移动，这里还需要考虑到如果分别移动到两边的情况，当滚动视图已经跳转到最后一页了，那么就需要重新循环到第一页，对于上面的jr_subdiv，这里采取的是定位的方式，因此可以通过定位来实现位置的改变。还需要注意的是定时器的开启与否还要取决于用户设置的属性来确定，如果用户不设置自动滚动，那么定时器就没有开启的必要了，代码如下：

View Code

 

到目前位置，我们基本实现了可以自动滚动的效果了，但是距离功能完善还差好几步，下面我们依次完善。接下来要做的就是左右按钮啦，快点拼接吧，代码如下：

//4***********增加左右按钮****************
var leftImg="<img src=‘"+leftIcon+"‘ style=‘position:absolute;left:0;top:50%‘ onclick=‘changePage(0)‘>";
var rightImg="<img src=‘"+rightIcon+"‘ style=‘position:absolute;right:0;top:50%‘ onclick=‘changePage(1)‘>";
subdiv+=leftImg;
subdiv+=rightImg;

 

拼接分页点图，点图这里通过li来实现，代码如下

//5***********拼接分页按钮****************
var temli="<ul style=‘position: absolute;left: 50%;bottom: 20px;text-align: center;‘>";
for(var i=0;i<array.length;i++){
temli+="<li class=‘jrli‘ style=‘margin-left:10px;background-color: white;list-style: none;float: left;width: 10px;height: 10px;border-radius: 10px;‘ onclick=‘changePageByIdc("+i+")‘></li>";
}

+ "</ul>";
subdiv+=temli;

到目前为止，所有需要的标签都已经就绪了，紧接着就是渲染到html中了：

//将拼接好的字符串写入用户传递过来的dom
dom.innerHTML=subdiv;

 

不知道大家有没有注意到，我们在拼接左翻页和右翻页的图标的时候添加一个方法changePage(flag),该方法会有一个参数：

0前翻页 1 后翻页

代码如下

changePage(flag)

 

另外需要交互的就剩下分页点图了，我们也给点图增加了事件，
通过点击的索引选择跳转的页面，实现跟上面类似代码如下：

View Code

到目前为止，我们的滚动视图基本封装完成，而且简单易使用。