zoukankan      html  css  js  c++  java
  • MUI动态生成轮播图片

            $$.ajax({
                url:'http://localhost:8080/api/v1/food/listFeatureFood',
                type:'Get',
                xhrFields: {withCredentials: true},
                   crossDomain: true,
                   data:{'foodTakeoutState':0,'foodTop':3},
                success:function(result){
                    var length = result.value.length;
                    if(length == 1) {
                        console.log(result.value[0].foodImg)
                        $$('.topImg').append(
                            '<div class="mui-slider-item">'+
                                '<a href="#">'+
                                    '<img src="'+result.value[0].foodImg+'">'+
                                '</a>'+
                            '</div>'
                            );
                        } else {
                        $$('.topImg').append(
                            //<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
                            '<div class="mui-slider-item mui-slider-item-duplicate">'+
                                '<a href="#">'+
                                    '<img src="'+result.value[length-1].foodImg+'" >'+
                                '</a>'+
                            '</div>'
                        );
                        $$('.topImgActive').append(
                            '<div class="mui-indicator mui-active"></div>'
                        );
                        for(var i = 0; i < length; i++) {
                                $$(".topImg").append(
                                '<div class="mui-slider-item">'+
                                    '<a href="#">'+
                                        '<img src="'+result.value[i].foodImg+'">'+
                                    '</a>'+
                                '</div>'
                            );
                        }
                        $$('.topImg').append(
                                //<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
                                '<div class="mui-slider-item mui-slider-item-duplicate">'+
                                    '<a href="#">'+
                                        '<img src="'+result.value[0].foodImg+'" >'+
                                    '</a>'+
                                '</div>'
                            );
                        for(var i = 0; i < length - 1; i++) {
                            $$('.topImgActive').append('<div class="mui-indicator"></div>');
                        }
                    }    
                    //需要重新加载轮播组件   
                    //获得slider插件对象
                    var gallery = mui('.mui-slider');
                    gallery.slider({
                        interval: 5000 //自动轮播周期,若为0则不自动播放,默认为0;
                    });    
                }
            });
  • 相关阅读:
    SQL Server-基础-经典SQL语句
    《程序是给自己看的还是给别人看的》
    中文写程序,何陋之有?
    ASP.NET 使用Ajax
    验证码帮助类
    js函数的四种调用方式以及对应的this指向
    C#相等性比较(转)
    HashTable、HashSet和Dictionary的区别
    MD5加密方法
    VS2015 & ReSharper 快捷键设置
  • 原文地址:https://www.cnblogs.com/ssjf/p/10213387.html
Copyright © 2011-2022 走看看