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/ 
版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

技术咨询:

时间: 2024-10-13 00:09:04

H5滚动轮播插件的相关文章

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

JQuery插件之图片轮播插件–slideBox

来源:http://www.ido321.com/852.html 今天偶然发现了一个比較好用的图片轮播插件-slideBox 先看看效果:http://slidebox.sinaapp.com/ 代码例如以下 1: <!doctype html> 2: <html> 3: <head> 4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

图片轮播插件的设计抽象

提出需求首页的轮播焦点图是个常见的需求.需求是这样子的1 每隔2秒切换一次图片2 切换图片的时候,会对应显示该图片的说明3 切换图片的时候,对应显示图片处于小按钮中的第几个,点击小按钮时跳到对应的大图4 自动滚动图片,鼠标放到图片区域时,停止滚动,移出时继续5 点击左右可以上下切换图片对于做一个图片轮播并不难,按照要求,写代码就行.而如何设计一个通用的图片轮播组件确实需要好好思考.因为样式是不确定的,同时html结构也是不确定的.所以问改如何设计这个轮播js呢? 使用插件?我是反插件的,除非插件

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果?

面向对象的方法来写轮播插件

其实写轮播的插件很多 ,但是终归不是自己写的 ,改起来还是很麻烦的 ,看过各种各样的轮播插件之后 ,自己写了这个 ,可能不完美 ,但是可复用,还算简洁,带有自动轮播以及按钮点击,前后滑动效果,基本的轮播已经够用了倒是. HTML部分代码-直接引用类传入参数即可 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title><

jquery实现轮播插件

这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" hr

图片轮播插件FlexSlider

推荐一款万能图片轮播插件FlexSlider 先来看一下都能做出什么效果吧 轮播图方向控制按钮和底部的焦点按钮都是可以控制显示和隐藏,最厉害的一点是该插件支持手机触屏 具体参数设置当然还是github更权威https://github.com/woothemes/FlexSlider/ 友情提示:在github上下载的demo由于用的是google的CDN,由于google被墙可能导致无法运行,建议更改jQuery的调用地址 最后看一下支付宝官方网站上的对该插件的应用效果图

图片轮播插件

刚买了司徒大大的<Javascript框架设计>,准备开始研读.打算在读之前先随便写个图片轮播插件,到读完这本书再来看看现在的自己有多菜....... 顺便做图片轮播的时候用美女照片真影响效率..... 上代码! 先是如何使用: html: <div id='outer' style='width:591px;height:862px;overflow:hidden;margin-left:100px;'> <ul id='try-slide' style='list-sty

js面向对象实现图片轮播插件

这个demo的学习过程很值得记录下来. 前言:学习了一遍js的面向对象,想找点东西练练手,就上网找了个用js面向对象实现图片轮播插件: http://www.codefans.net/jscss/code/3327.shtml 功能:新建一个实例就是一个图片轮播,可以新建多个,但是实例与实例之间是干扰的. 过程:看视频教程说,第一次搞面向对象,把面向过程改头换面就可以了.自己就死磕地先写了原生,再改为面向对象. 写原生的时候,遇到的问题: 不知道怎么样停止计时器:clearInterval.cl