22HUI - 轮播组件（hui-swipe）

效果图

DOM 结构

    

        

           
轮播项目
           
轮播项目
        
    

请使用一个div包裹 .hui-swipe

huiSwpie对象使用说明

需要引用 hui-Swipe.js 并进行轮播插件初始化。操作步骤：

1. 通过 new huiSwipe(’#轮播组件外层dom id’) 获得轮播对象;
2. 执行轮播对象的 run()方法。
3. 在run方法执行前可以通过轮播对象的属性来控制轮播的效果；

huiSwpie对象属性说明

loop 是否循环播放，默认 true； speed 每帧动画切换时的动画时间，默认 500， 单位：毫秒； delay 轮播间隔时间，默认 5000，单位：毫秒； indicatorOn 是否展示进度点，默认 true； autoPlay 是否自动播放，默认 true；

关于动态加载

获取动态图片信息后整合成

追加到轮播组件内，然后再获取轮播对象，执行其run方法；

代码

HUI 轮播组件




    

    HUI 轮播组件


    

        

        
轮播组件演示
        

    
    

        

            

                

                

                

                

            
        
    
    

        

        
远程图片获取
        

    
    

        

            

        
    




var swipe = new huiSwpie('#swipe');
swipe.autoPlay = false;
swipe.run();
//加载远程图片示例
hui.get(
    'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=lunbo',
    function(res){
        var arr  = res.split('--hcSplitor--');
        for(var i = 0; i < arr.length; i++){
            var div = document.createElement('div')
            div.setAttribute('class', 'hui-swipe-item');
            div.innerHTML = arr[i];
            hui(div).appendTo('#swipe2 .hui-swipe-items');
        }
        var swipe2 = new huiSwpie('#swipe2');
        swipe2.run();
    },
    function(){
        hui.toast('读取远程数据失败');
    }
);