轮播图数据 不显示

提问 未结 7 184
宁波互邦软件
悬赏:20飞吻
版本:layui 浏览器:

jsp
        <div class="floors">
<div class="sk">
<div class="layui-text" style="color: lightsalmon;text-align: center;font-weight: 700;font-size: 50px;height: 60px">Feature Product</div>
<div class="sk_inner w1200">
<div class="sk_hd">
<a href="javascript:;"> <img src="../res/static/img/s_img1.jpg">
</a>
</div>
<div class="sk_bd">
<div class="layui-carousel" id="feature_product">
<div carousel-item id="feature_product_item">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="floors">
<div class="sk">
<div class="layui-text" style="color: lightsalmon;text-align: center;font-weight: 700;font-size: 50px;height: 60px">Host Product</div>
<div class="sk_inner w1200">
<div class="sk_hd">
<a href="javascript:;"> <img src="../res/static/img/s_img1.jpg">
</a>
</div>
<div class="sk_bd">
<div class="layui-carousel" id="host_product">
<div carousel-item id="host_product_item">
<div class="item-box">
<div class="item">
<a href="javascript:;"><img
src="../res/static/img/s_img3.jpg"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>¥49.00</span>
<del>¥99.00</del>
</div>
</div>
</div>
<div class="item-box"><div class="item"></div></div>
js:
layui.config({
base : '../res/static/js/util/'
}).use([ 'mm', 'carousel' ], function() {
//轮播图
var carousel = layui.carousel,
loadTopList()
function loadTopList() {
RhinoUtil.get("/admin/product/ProductAction!getTopList", {}, function (res) {
var data = res.data.results;
console.log(data)
var content = '<div class="item-box">';
layui.each(data, function (index, item) {
var imgUrl = "../../image/" + item.pic_url;
if (item.pic_url == null)
imgUrl = "../res/static/img/paging_img1.jpg"; // 默认图片
content += '<div class="item"> <a href="javascript:;"><img src="'+'../res/static/img/paging_img1.jpg'+'"></a> <div class="title">'+item.e_name+'</div> <div class="price"> <span>¥'+item.price+'</span> <del>¥'+item.price*2+'</del> </div> </div>';
});
content+='</div>'
console.log(content)
$("#feature_product_item").append(content)

});
}
var option = {
elem : '#feature_product',
width : '100%', //设置容器宽度
arrow : 'always',
height : '298',
indicator : 'none'
}
var option2 = {
elem : '#host_product',
width : '100%', //设置容器宽度
arrow : 'always',
height : '298',
indicator : 'none'
}
carousel.render(option2);
var ins =carousel.render(option);
ins.reload(option)


上边是后台数据 下边是静态数据
回帖
  • 你好,看一下你的控制台报什么错
    0 回复

  • 没报错
    0 回复
  • @宁波互邦软件 把$("#feature_product_item").append(content) 换成 $("#feature_product").append(content) 这个才是它的容器 试一试
    0 回复
  • @海绵小方块 那个没什么问题 render elem选定#feature_product就可以了 我错在没把carcousel.render(option)没写在后台数据请求回调函数内部 还有应该至少有两个<item-box>块 才能有轮播效果我在后边又添加了一个
     function loadTopList() {
    RhinoUtil.get("/admin/product/ProductAction!getTopList", {}, function (res) {
    var data = res.data.results;
    console.log(data)
    var content = '<div class="item-box">';
    layui.each(data, function (index, item) {
    var imgUrl = "../../image/" + item.pic_url;
    if (item.pic_url == null)
    imgUrl = "../res/static/img/paging_img1.jpg"; // 默认图片
    content += '<div class="item"> <a href="javascript:;"><img src="'+'../res/static/img/paging_img1.jpg'+'"></a> <div class="title">'+item.e_name+'</div> <div class="price"> <span>¥'+item.price+'</span> <del>¥'+item.price*2+'</del> </div> </div>';
    });
    content+='</div> <div class="item-box"> <div class="item"></div> </div>'
    console.log(content)
    $("#feature_product_item").append(content)
    var option = {
    elem : '#feature_product',
    width : '100%', //设置容器宽度
    arrow : 'always',
    height : '298',
    indicator : 'none'
    }
    carousel.render(option);
    });
    }
    0 回复
  • @HiTerry 大神为什么轮播图渲染,两个轮播图在异步方式下只能随机成功一个 同步方式下只能成功调用时靠后的那个
    0 回复
  • @宁波互邦软件 只能说你写的有问题,看一下是不是js执行顺序问题,还有你的代码哪来的执行两个,你有两个option,但你只渲染了一个
    0 回复
  • 还有动态渲染的话你可以用动态模板,在lay-done里渲染你的轮播
    0 回复