HTML5实现webApp中图片轮播的效果（二）之 iSlider 爬坑经历
上一篇介绍了 iSlider 这款网页轮播图片插件的基本使用：
接下来看看在实际应用的过程中会遇到哪些问题
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;就搞定了。
如有其它问题，请留言交流。