关闭

HTML5实现webApp中图片轮播的效果(二)之 iSlider 爬坑经历

标签: iSlider-jshtml5web app图片轮播css
5713人阅读 评论(3) 收藏 举报
分类:

上一篇介绍了 iSlider 这款网页轮播图片插件的基本使用:

HTML5实现webApp中图片轮播的效果(一)之基本使用

接下来看看在实际应用的过程中会遇到哪些问题

1、从接口中动态加载需要呈现的图片以及相关的内容数据

如果用到这款插件来实现需求,大多数时候我们不会直接放固定的图片或者数据再这个容器里,最合理的方式应该是从服务端加载数据构造出数据源,来保证我们展示内容的灵活性和可扩展性
在上一篇中我们说到数据源是这样的:

var date=[
    {content:"imgs/1.jpg},
    {content:"imgs/2.jpg},
    {content:"imgs/3.jpg}
];

可以看到数据源是一个数组,也就是说我们可以根据服务端返回的数据,动态的生成一个数组就可以了:

//首先定义一个数组,即为数据源,初始为空
var domList = [];

//ajax调取服务端接口,解析返回的数据
function loadMainPic(){
$.post("你的接口名称", {

}, function(data) {
    var result = data.returnObj;

    //如果没有返回数据,不要继续往下加载插件
    if(!result)
    {
        return ;    
    }

    //根据返回的结果来动态的生成数组(结果的长度等于数组长度)
    for (i = 0; i < result.length; i++){
        domList.push({
            'height': height,
            'width': width,
            'content': '<div>这里拼出你需要的符合你需求的轮播图片div(图片文字等都是从服务器返回的)</div>'
        });

    }

    //这里是构造islider的关键代码
    var islider = new iSlider({
    data: domList,//数据源
    dom: document.getElementById("dom-effect"),//容器
    type: 'dom',//这里我需要的类型是一个dom而不是直接为图片(因为这里除了图片还需要显示别的)
    animateType: 'rotate',//动画
    isAutoplay: true,//自动滑动
    isLooping: true//循环

    });

这样就构建出一个基于加载服务端返回的数据的图片轮播插件

2、想点击图片转到相应的页面,为什么点击事件失效了?

图片轮播,除了一般的展示数据外,有的需求还希望他可以作为一个入口,比如说加上点击事件让他变成一个链接等等,这原本是一个极其简单并且理所当然的需求,没想到却在开始的时候难住我了
无论在插件的哪一层添加onClick点击事件,点击之后都没有一点反应,原本以为这款插件内置了什么点击回调函数之类的东西,需要有专门的方法去重写什么的,结果试了半天。。。
并没有什么卵用啊!!!

最后,仔细查看上篇中列出的配置参数之后,发现问题出在这里:
有一个参数

fixPage
{Boolean|Array|String}
原生事件阻止
场景内屏蔽原生事件的触发,如:滚动、拖拽、缩放等
“A”元素,阻止,移动端建议使用自定义的tap(touch系事件联合判断)
默认:true(开启)

搜嘎,原来是这样,然后在上一个问题中的构造islider的关键代码处,多加了一行

fixPage:false  //不阻止原生事件    就OK了

3、可以点击了,但是图片在容器中却不能固定了,不小心会拖动很难看?

导致这个问题的原因,毫无疑问是由第二个问题引起的,因为设置配置参数不在阻止原生事件之后,不仅可以点击了,还可以上下滚动了,而造成可以滚动的主要原因是,因为将图片的宽度设置为100%,所以高度自然就变大了,如果让高度也自适应了容器100%显示,那图片必然会扭曲,所以,这个时候就应该对元素的 overflow 属性进行控制:

给从最内层放图片的元素到最外层放轮播图片这个控件的元素的css样式加一句:

overflow: hidden;

就搞定了。

如有其它问题,请留言交流。

3
0
查看评论

HTML5实现webApp中图片轮播的效果(一)之基本使用

最近开始用h5做一款BBS类的webapp,做好后嵌入公司的其他几个Android或ios应用中,这差不多算是混编开发了吧 在我看来,原生app和webapp各有优缺点,原生应用赢在稳定性好、用户体验度高,而webapp则在跨平台性、灵活度方面更胜一筹,随着近几年h5的火爆,webapp也越来越受...
  • qingchen1016
  • qingchen1016
  • 2016-05-19 21:32
  • 29397

app引导功能界面+广告轮播控件,两句代码搞定

基本就实现了大部分app的广告轮播的需求了,主要步骤就是,给RecycleTimeViewPage填充数据,rtPageView.setIntervalTime(3).startAutoPlay()设置时间,自动轮播就可以了。这里需要导入包rtviewpager.jar,这个包是我自己写的,结合了开...
  • p522947409
  • p522947409
  • 2016-12-10 20:04
  • 819

HTML5实现webApp中图片轮播的效果(二)之 iSlider 爬坑经历

iSlider 基本使用 1、从接口中动态加载需要呈现的图片以及相关的内容数据 2、想点击图片转到相应的页面,为什么点击事件失效了? 3、可以点击了,但是图片在容器中却不能固定了,不小心会拖动很难看?
  • qingchen1016
  • qingchen1016
  • 2016-05-31 15:03
  • 5713

打造好用的App首页轮播图~~

我们在项目中首页经常会有一个轮播图模块 是利用viewpager实现的 每次都要重新写一遍所有的逻辑没有复用的效果 所以就把这个东西封装好来达到复用的效果使用起来也特别简单 这篇博客会先给一个简单使用的例子之后再分析实现的过程 虽然写的很烂 看到后面应该会有一点点东西的 吧~先看一个效果...
  • katherine_qj
  • katherine_qj
  • 2016-11-21 14:19
  • 1279

用iSlider实现手机端图片轮转

效果就是触摸事件图片滑动, 需要引入iSlider的css和js,代码如下: <meta name="viewport" content="width=device-width,initial-scale=1.0...
  • sinat_32690121
  • sinat_32690121
  • 2016-08-10 11:57
  • 934

介绍一个性能飞快的移动端滑屏组件iSlider.js

islider功能介绍: /** * iSlider 高性能全屏滑动组件 * @class iSlider * @param {object} opts * @param {string} opts.wrap='.wrap' 容器 * @param {string}...
  • laokdidiao
  • laokdidiao
  • 2016-04-17 23:27
  • 5270

islider图片插件资源

  • 2015-06-02 14:04
  • 19KB
  • 下载

islider滑动控件

1、参考在线资料: 引用https://github.com/BE-FE/iSlider/blob/master/README_Chinese.md 2、demo实例: var platform = window.Android || window; function showFun(str1...
  • big1989wmf
  • big1989wmf
  • 2017-04-12 16:40
  • 468

图片滑动组件iSlider

iSlider 移动webapp滑动最优解决方案 开始使用 Api 实例 下载 English Official View On GitHub This project is maintained by BE-FE iSlider iSlider...
  • ITX2000
  • ITX2000
  • 2015-02-08 15:22
  • 1352

iSlider.js

  • 2015-04-30 14:08
  • 52KB
  • 下载
    个人资料
    • 访问:88641次
    • 积分:742
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:2篇
    • 译文:0篇
    • 评论:65条
    文章分类
    最新评论