logo

iMAG移动应用开发指南

SlideImage

图组控件,用来显示一组图片,可以是网络图片或本地资源图片。

标签

标签名 描述 说明 子标签
slideimage 图组标签 用来显示一组图片,可以是网络图片或本地资源图片 item

属性

属性名 取值 描述
id String id编码
style String
样式,包括:
fillwidth Boolean 设置是否宽度撑满:
true:宽度撑满
false:宽度不撑满,默认值
scalable Boolean 设置是否允许手指缩放:
true:允许缩放,默认值
false:不允许缩放
indicatorPosition String 设置indicator(小圆点)的位置
center: indicator居中,默认值
right: indicator居右
indicatorIcon String 设置indicator(小圆点)的icon图片,如需设置要同时设置两个:
indicatorIcon="icon_default.png,icon_current.png"
indicatorBackground String 设置indicator(小圆点)的背景
autoplay Boolean 设置是否自动播放:
true:自动播放
false:不自动播放,默认值
period Integer 设置播放时间间隔,单位毫秒

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

Item

图片项

标签名 描述 说明
item 图片项子标签 images的子标签,用来展示一个网络图片

属性

属性名 取值 描述
src URL 图片URL地址
alt String 图片的说明文字
onclick Javascript 点击时触发的脚本

控件详解

注意:SlideImage控件默认会使用缓存,相同文件名的图片只会获取一次,如果要对同一图片文件多次更新显示,需要动态创建控件并在文件名后加上随机数,具体请参照下面动态创建的例子。

● 默认满屏显示

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page orientation="sensor">
        <content>
            <slideimage style="background:back;">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
            </slideimage>
        </content>
    </page>
</imag>

效果:

如果不设置高度,SlideImage的高度会默认撑满。

● 设置高度

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>设置高度</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage style="background:back;height:200">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
            </slideimage>
        </content>
    </page>
</imag>

效果:

设置style="height:200"

● 宽度撑满显示

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>宽度撑满显示</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage style="background:back;height:50%" fillwidth="true">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
            </slideimage>
        </content>
    </page>
</imag>

效果:

说明:设置fillwidth="true",宽度撑满时需要设置高度height,为了适配不同分辨率屏幕,height可设置为百分比,如:style="height:50%",此时高度是宽度的50%。

● 禁止手指缩放

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>禁止手指缩放</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage style="background:back;height:50%" fillwidth="true" scalable="false">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
            </slideimage>
        </content>
    </page>
</imag>

通过设置scalable="false"来禁止手指缩放。

● 设置indicator居右

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>设置indicator居右</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage indicatorPosition="right" style="background:back;height:50%" fillwidth="true" scalable="false">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
            </slideimage>
        </content>
    </page>
</imag>

效果:

设置indicatorPosition="right",indicator(小圆点)会居右显示。

● 设置indicator背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>设置indicator背景</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage indicatorPosition="right" indicatorBackground="#55333333" style="background:back;height:50%" fillwidth="true" scalable="false">
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
            </slideimage>
        </content>
    </page>
</imag>

效果:

上面设置了半透明颜色背景,同样的可以设置水平拉伸背景图片:indicatorBackground="bg.png repeat-x"。

● 设置indicator文字

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>设置indicator文字</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage indicatorPosition="right" indicatorBackground="#55333333" style="background:back;height:50%" fillwidth="true" scalable="false">
                <item src="http://www.imagapp.com/download/example/images/image3.jpg" alt="文字内容1"/>
                <item src="http://www.imagapp.com/download/example/images/image1.jpg" alt="文字内容2"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif" alt="文字内容3"/>
            </slideimage>
        </content>
    </page>
</imag>

效果:

设置item的alt属性显示文字

● 设置点击事件

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>设置点击事件</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage style="background:back;height:50%" indicatorPosition="right" fillwidth="true" scalable="false">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg" onclick="$page.open('http://www.baidu.com', {target:'_browser'})"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif" onclick="$page.open('http://www.baidu.com', {target:'_browser'})"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg" onclick="$page.open('http://www.baidu.com', {target:'_browser'})"/>
            </slideimage>
        </content>
    </page>
</imag>

● 自动播放

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>自动播放</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage autoplay="true" style="background:back;height:50%" indicatorPosition="right" fillwidth="true" scalable="false">
                <item src="http://www.imagapp.com/download/example/images/image1.jpg"/>
                <item src="http://www.imagapp.com/download/example/images/image2.gif"/>
                <item src="http://www.imagapp.com/download/example/images/image3.jpg"/>
            </slideimage>
        </content>
    </page>
</imag>

设置autplay属性控制自动播放,同时可以用period属性控制播放时间间隔。

● 动态创建图组

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[   
        $page.onload = function() {
            var xml = '<slideimage style="background:back;height:50%" fillwidth="true" autoplay="true" scalable="false">';
            for (var i = 0; i < 3; i++) {
                xml += '<item src="http://www.imagapp.com/download/example/images/image' + (i + 1) + '.jpg?rand=' + Math.random() + '"/>';
            }
            xml += '</slideimage>'; 
            var slideimage = $C(xml);
            $('test_content').add(slideimage);
        }
    ]]>  
    </script>
    <page>
        <title>
            <center>
                <label>动态创建图组</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content id="test_content">
        </content>
    </page>
</imag>

通过$C(xml)方法动态创建SlideImage对象,其中文件地址末尾加了随机数 Math.random(),用来防止图片缓存。

● 动态增删图片

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[   
        $page.onload = function() {
            for (var i = 0; i < 3; i++) {
                var item = $C('<slideimage-item><item id="slideimage_item' + i + '" src="http://www.imagapp.com/download/example/images/image' + (i + 1) + '.jpg" alt="文本内容' + (i + 1) + '"/></slideimage-item>');
                $('test_slideimage').add(item);         
            }
        }
    ]]>  
    </script>
    <page>
        <title>
            <center>
                <label>动态增删图片</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content>
            <slideimage id="test_slideimage" style="background:back;height:50%" indicatorPosition="right" fillwidth="true" autoplay="true" scalable="false">
            </slideimage>
            <row>
                <button onclick="$('test_slideimage').remove($('slideimage_item0'));">删除</button>
                <button onclick="$('test_slideimage').clear();">清空</button>
            </row>
        </content>
    </page>
</imag>

通过add()和remove()方法动态新增和删除图片。

示例下载

请点此下载slideimage相关的示例代码:imag-slideimage.zip