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'))
            })
        }
    })
    故乡明
  • 相关阅读:
    制衡技术的新蓝海
    制衡技术,从Adblock所想到的
    centos6中安装新版 Elasticsearch 7.x
    nrm 安装与npm镜像切换
    james2.3 配置收件 之 MariaDB数据库配置
    手动搭建apache james邮件服务器,实现邮件功能
    James 如何作为服务在后台启动
    安装最新版RabbitMQ v3.7.13 以及基本配置
    mac 下 通过 brew 安装 MariaDB
    Mac 上安装maven
  • 原文地址:https://www.cnblogs.com/luweiweicode/p/15342842.html
Copyright © 2011-2022 走看看