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;
                    });    
                }
            });
  • 相关阅读:
    shell 知识点
    folder,source folder,package 区别
    meta viewport 理解
    一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
    java 报错及解决
    Charles :mac上的手机代理
    关联本地文件夹到github项目
    tomcat 安装
    Refused to display '[url]' in a frame because it set 'X-Frame-Options' to 'Deny'.
    linux 知识点
  • 原文地址:https://www.cnblogs.com/ssjf/p/10213387.html
Copyright © 2011-2022 走看看