zoukankan      html  css  js  c++  java
  • 图片轮播

    <div class="layui-col-md3" style="height: 300px;background: white;padding-top: 8px">
        <div class="img_select">
            <div class="layui-carousel" id="imgScroll">
                <div carousel-item id="shopPics">
                </div>
            </div>
        </div>
    </div>
    .img_select {
        height: 274px;
        padding: 10px;
        /*box-shadow: 0 0 10px 5px #e3e3e3;*/
    }
    
    .img_select img {
         100%;
        height: 100%;
    }
    $.myAjax({
        url: '/baseData/shopManage/getCommonShopDetail.do',
        type: "POST",
        dataType: "json",
        data: {
            rowKey: shopType + "#" + shopId
        },
        success: function (result) {
            var html = "";
            if (result) {
                var dataArray = [];
                if (result.busLicURL && result.busLicURL != "-1") {
                    dataArray.push(result.busLicURL);
                }
                if (result.fodLicURL && result.fodLicURL != "-1") {
                    dataArray.push(result.fodLicURL);
                }
                for (var i = 0; i < dataArray.length; i++) {
                    html += '<div class="openDetail" style="cursor: pointer;"> <img src="' + dataArray[i] + '"></div>'
                }
                if (html == "") {
                    html += '<div><img src="/resource/images/noimage2.jpg"></div>'
                }
            } else {
                html += '<div><img src="/resource/images/noimage2.jpg"></div>'
            }
    
            $("#shopPics").append(html);
    
    
            //layui图片轮播
            layui.use('carousel', function () {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#imgScroll'
                    ,  '100%' //设置容器宽度
                    , height: '100%'
                    , arrow: 'hover' //始终显示箭头
                    , autoplay: true
                    , interval: 5000//轮播切换时间
                    //,anim: 'updown' //切换动画方式
                });
            });
            // 轮播图片点击事件
            $('.openDetail').click(function () {
                window.open($(this).children().prop('src'))
            })
        }
    })
    故乡明
  • 相关阅读:
    以此来励志吧!!!(选自:知乎)
    【P1303】苹果二叉树
    【P1813】8的倍数
    2016.9.4 の 測試
    后缀数组
    个中模板
    基数排序
    【NOIP2014D2T3】解方程
    【HAOI2006】【BZOJ1051】【p1233】最受欢迎的牛
    java安全性-引用-分层-解耦
  • 原文地址:https://www.cnblogs.com/luweiweicode/p/15342842.html
Copyright © 2011-2022 走看看