利用iSlider插件显示图片列表

Masion

做手机APP应用时，经常遇到查看图片列表问题
利用网上的iSlider的jQuery插件，完美的解决了这个问题

先看效果图

Masion

特点：
1、用手指滑动，切换图片
2、图片宽度占满全屏，高度居中
3、支持手机APP，微信，网页浏览
4、可以加载无数多的图片，无卡顿

Masion

解决思路：
1、使用的是jQuery的iSlider插件  网页地址： http://be-fe.github.io/iSlider/
2、下载相关的插件支持文件 主要是 islider.js, islider_desktop.js 和zzsc（都已经放到楼下的附件中了）
3、在源码中引用这些文件：
<script src="js/islider.js"></script>
<script src="js/plugins/islider_desktop.js"></script>（这两个js文件我是放在了model标签后面，panel标签前面）
<require xid="require1" url="css!$UI/lawranceMob/picList/css/zzsc"></require></resource>
(注意，必须如上图所示的引用，其他引用方法有问题）

Masion

页面源码：
<div id="non-looping" class="iSlider-effect" style="height:100%;width:100%;"/>

js代码
Model.prototype.windowReceiver1Receive = function(event){
                this.comp("MTittle").set({'title':event.data.titleStr});

                /* var picList = [
                        {content: "images/1.jpg"},
                        { content: "images/2.png"},
                        {content: "images/3.png" },
                        { content:"images/5.jpg" },
                        {content:"images/6.jpg" },
                        { content:"images/7.jpg" },
                        { content:"images/8.jpg" },
                        {content:"images/9.jpg"  }
                     ];*/
        
                var islider3 = new iSlider({
            data: event.data.picList,
            dom: document.getElementById("non-looping"),
            animateType: 'default',
        });

Masion

源码打包文件

Masion

附件中是在程序中正常使用的形式，如果初次接触的程序员，可以在images中放上1.jpg，2.jpg------9.jpg（图片自己选）
把model的onload函数改为如下，就可以看到效果了。
   

                var picList = [
                        {content: "images/1.jpg"},
                        { content: "images/2.png"},
                        {content: "images/3.png" },
                        { content:"images/5.jpg" },
                        {content:"images/6.jpg" },
                        { content:"images/7.jpg" },
                        { content:"images/8.jpg" },
                        {content:"images/9.jpg"  }
                     ];

                var islider3 = new iSlider({
            data: picList,
            dom: document.getElementById("non-looping"),
            animateType: 'default',
        });

Masion

如果其他页面想要调用本页面显示图片列表
需要在传递过来的data中准备图片列表的json数组，结构如楼上所示
下面有个例子：

Masion

1.         Model.prototype.open = function(event){
   
2. 
   
3.        
   
4.                 var data=this.comp("magzineData");
   
5.                 //打开对应发现视觉图片列表
   
6.                
   
7.                 var self=this;
   
8.                 var url = "$UI/lawranceMob/picList/mainActivity.w";
   
9.                 //打开利用iSlider做成的图片列表
   
10.        
    
11.                 var params = {                // 构造请求参数
    
12.                         "tableName" :"LA_MagzinePicList",
    
13.                         "columns" :  "fImageUrl,fMainID,fReleaseDate",        // 指定返回的列 - 不仅用于限定返回的列范围，同时也用于指定返回列名的大小写
    
14.                         "limit" : -1,                        // 分页信息 - 行数
    
15.                         "offset" : 0,                // 分页信息 - 行偏移
    
16.                         "orderby": "fReleaseDate",
    
17.                         "condition": " fMainID='"+data.getRowID()+"'"
    
18.                 };
    
19.                 var success = function(resultData) {                // 请求成功后的回调方法
    
20.        
    
21.        
    
22.                    var names = [];
    
23.                    for(var i=0;i<resultData.rows.length;i++){
    
24.                            names.push({"content":require.toUrl("$UI/lawranceMob/ImageSource/school/"+resultData.rows[i].fImageUrl.value)});
    
25.                    }
    
26. 
    
27.                    var tempJson={
    
28.                                    "titleStr":  data.getValue("fTitle"),
    
29.                                    "picList": names
    
30.                    };
    
31.                    self.comp("windowDialog1").open({"src":require.toUrl(url),"data":tempJson});
    
32. 
    
33.                 };
    
34.                 Baas.sendRequest({                // 发送请求
    
35.                         "url" : "/lawrance", // servlet请求地址
    
36.                         "action" : "querySingleTable", // action
    
37.                         "params" : params, // action对应的参数
    
38.                         "success" : success // 请求成功后的回调方法
    
39.                 });
    
40.                
    
41.         };

复制代码

暗夜的忧伤

赞！占楼

ecoolper

楼主厉害