动态生成的AmazeUI轮播图不起作用

2018-08-20 08:38:10 585 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

amazeui 框架，flexslider 轮播图特效，解决从后台获取图片的问题直接上图看效果：上面界面里的轮播图就是用了amazeui框架里的特效，由于amazeui这个特效的图片通过 "添加slide" 、"移除slide",增加和移除轮播里面的图片，这是amazeui的例子：因此我们写成从后台动态获取图片数据时，应该也执行 "添加slide"（addSlide）阅读详情

用AmazeUI作一个图片轮播，
如果采用官方的例子，是这样的



  <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' >

  <ul class="am-slides">

      <li>

        	<img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">

         

      </li>

      <li>

        	<img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">

         

      </li>

      <li>

        	<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">

         

      </li>

      <li>

        	<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">

         

      </li>

  </ul>

</div>

运行没有问题
但是这些图片地址要从数据库读取，因此li的图片连接要循环在js里拼接得到



 var slidehtml = '';

var slidepictures = site.SlidePicture.split('|');

 for (var i = 0; i < slidepictures.length; i++) {

          slidehtml += '<li><img class="am-img-responsive" src="../assets/banner' + slidepictures[i] + '"></li>';

  }

                               

$("#doc-ipt-slide").html(slidehtml);

运行后，渲染得到的DOM结构和官网提供的一模一样