关闭

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

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

上一篇介绍了 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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:68398次
    • 积分:671
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:2篇
    • 译文:0篇
    • 评论:59条
    文章分类
    最新评论