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

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

就搞定了。

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