H5滚动轮播插件
概述
JRedu
随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件。
1效果图如下:
2主要功能
支持超简单使用
支持数据类型json对象
支持自动切换
支持前后翻页
支持分页点图
支持动画过渡
。。。
后续功能可以自己酌情添加
3实现方式
首先 ,我们需要一个容器,在这里只需要一个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(),并初始化所有数据
//1*************取出用户传递的所有信息**************
//获取数据数组
array=obj.array;
if(array.length==0)return; //设置添加的容器
dom=document.getElementById(obj.id);
if(!dom) return;
dom.style.position="relative";
dom.style.overflow="hidden";
//是否自动滚动
var isAuto=obj.isAuto||false;
//时间间隔,此条件只有在isAuto为true的情况才有效
var duration=obj.scrollDuration||1;
//设置leftIcon
var leftIcon= obj.leftIcon||"滚动轮播/l.png";
//设置右边Icon
var rightIcon= obj.rightIcon||"滚动轮播/r.png";
//设置当前点的颜色
currentColor= obj.currentColor||"black";
//设置未选中的点的颜色
othersColor= obj.otherColor||"white";
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,这里采取的是定位的方式,因此可以通过定位来实现位置的改变。还需要注意的是定时器的开启与否还要取决于用户设置的属性来确定,如果用户不设置自动滚动,那么定时器就没有开启的必要了,代码如下:
//3***********增加定时器****************
if(isAuto){
setInterval(function(){
var jr_subdiv=dom.firstElementChild;
var fleft=parseFloat(jr_subdiv.style.left);
//如果是最后一页,则立马转到第一页
if(fleft<=-1*parseFloat(dom.style.width)*(array.length-1)){
//设置新的left
jr_subdiv.style.left="0px";
changeColor(0,currentColor,othersColor);
}else{
//设置新的left
jr_subdiv.style.left=fleft-parseFloat(dom.style.width)+"px";
var page=(fleft-parseFloat(dom.style.width))/parseFloat(dom.style.width)*-1;
changeColor(page,currentColor,othersColor);
} },duration*1000+500);
}
到目前位置,我们基本实现了可以自动滚动的效果了,但是距离功能完善还差好几步,下面我们依次完善。接下来要做的就是左右按钮啦,快点拼接吧,代码如下:
//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 后翻页,下面我们来晚上这个方法吧
代码如下
/***
*
* @param flag 0向前 1向后
*/
function changePage(flag){
var jr_subdiv=dom.firstElementChild;
var fleft=parseFloat(jr_subdiv.style.left); if(flag==1){
//如果是最后一页,则立马转到第一页
if(fleft<=-1*parseFloat(dom.style.width)*(array.length-1)){
//设置新的left
jr_subdiv.style.left="0px";
}else{
//设置新的left
jr_subdiv.style.left=fleft-parseFloat(dom.style.width)+"px";
}
}else{
//如果是最后一页,则立马转到第一页
if(fleft==0){
//设置新的left
jr_subdiv.style.left=-(array.length-1)*parseFloat(dom.style.width) +"px";
}else{
//设置新的left
jr_subdiv.style.left=fleft+parseFloat(dom.style.width)+"px";
}
}
var index=-parseFloat(jr_subdiv.style.left)/parseFloat(dom.style.width); }
changePage(flag)
另外需要交互的就剩下分页点图了,我们也给点图增加了事件,
通过点击的索引选择跳转的页面,实现跟上面类似代码如下:
/***
*
* @param index
*/
function changePageByIdc(index){
var jr_subdiv=dom.firstElementChild;
var left= -parseFloat(dom.style.width)*index;
jr_subdiv.style.left= left+"px"; } /***
*
* @param index 索引
* @param currentColor当前的颜色
* @param othersColor其他的颜色
*/
function changeColor(index,currentColor,othersColor){ //1 将所有的都变成白色
var lis=document.getElementsByClassName("jrli");
for(var i=0;i<lis.length;i++){
var tem=lis[i];
tem.style.background=othersColor;
} //2 将当前的变成currentColor
lis[index].style.background=currentColor;
}
到目前为止,我们的滚动视图基本封装完成,而且简单易使用。另外由于篇幅问题,先给大家分享到这里,大家也可以继续完善一下自己的代码。后续还会有更多的分享给大家,敬请期待。
出处:http://www.cnblogs.com/jerehedu/
版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:

H5滚动轮播插件的更多相关文章
- 滚动轮播插件——jCarouselLite
jcarousellite(上下.水平滚动元素插件)插件使用: 参数说明: btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev" ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- SuperSlide轮播插件滚动高度或宽度不对的问题解决
声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- 一款好用的轮播插件swiper,适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"> <div cl ...
- swipe轮播插件零基础实用
此篇博客整理了常用的轮播效果,适用于所有开发人员 swipe是当下相对而言较好用的轮播插件,下面是博主整理的demo源代码,可直接上手(备注:需自己手动swipe所需的j和css) 此段代码总共是有三 ...
- flickity:支持触摸滑动,响应迅速的幻灯片轮播插件
简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...
随机推荐
- php 多维数组简化(递归)
<?php $a=[ 'a'=>['d'=>['aa'=>1,'bb'=>2,'cc'=>3]], 'b'=>['f'=>['dd'=>4,'ee ...
- Python中字典和集合
Python中字典和集合 映射类型: 表示一个任意对象的集合,且可以通过另一个几乎是任意键值的集合进行索引 与序列不同,映射是无序的,通过键进行索引 任何不可变对象都可用作字典的键,如字符串.数字.元 ...
- Vijos 1006 晴天小猪历险记之Hill 单源单汇最短路
背景 在很久很久以前,有一个动物村庄,那里是猪的乐园(^_^),村民们勤劳.勇敢.善良.团结-- 不过有一天,最小的小小猪生病了,而这种病是极其罕见的,因此大家都没有储存这种药物.所以晴天小猪自告奋勇 ...
- Vijos 1002 过河 状态压缩DP
描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数轴上 ...
- 关于标签中常用的disabled
.children("option[disabled]").removeAttr('disabled');
- .NET 跨平台界面框架和为什么你首先要考虑再三
原文地址 现在用 C# 来开发跨平台应用已经有很成熟的方案,即共用非界面代码,而每个操作系统搭配特定的用户界面代码.这个方案的好处是可以直接使用操作系统原生的控件和第三方控件,还能够和操作系统 ...
- 谈谈ES6箭头操作符
如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=& ...
- 防止js全局变量污染方法总结
javaScript 可以随意定义保存所有应用资源的全局变量.但全局变量可以削弱程序灵活性,增大了模块之间的耦合性.在多人协作时,如果定义过多的全局变量 有可能造成全局变量冲突,也就是全局变量污染问题 ...
- git命令小结
注: 如果你使用Windows系统,为了避免遇到各种莫名其妙的问题,请确保目录名(包括父目录)不包含中文 学习git文档推荐:http://www.liaoxuefeng.com/wiki/00137 ...
- visual Studio 2017 扩展开发(一)《向Visual Studio菜单栏新增一个菜单》
最近有接触到关于visual studio 2017 扩展的开发,特此记录,也是为了督促自己去深入了解其原理. 开始开发Visual Studio 扩展,在这里我安装了visual studio 20 ...