// 滚动横幅
.banner(
    @width,
    @height,
    @item_wrap: '>:first-child',
    @item: '@{item_wrap}>*') when not (isnumber(@item_wrap)) {

    @item_selector: e(@item);
    @item_wrap_selector: e(@item_wrap);

    display: block;
    position: relative;
    overflow: hidden;
    .size(@width, @height);

    @{item_wrap_selector} {
        display: block;
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
        .size(1000%, 100%);
        .user-select(none);
    }

    @{item_selector} {
        float: left;
        .size(10%, 100%);

        > a {
            display: block;
            .size(auto, 100%);
        }

        > img,
        a > img {
            .size(100%);
        }
    }
}

// 高度自适应
// 这里第三个参数传入的宽度的实际值，而前两个参数只是用来计算宽高比
.banner(
    @width,
    @height,
    @real_width,
    @item_wrap: '>:first-child',
    @item: '@{item_wrap}>*') when (isnumber(@real_width)) {

    @item_selector: e(@item);
    @item_wrap_selector: e(@item_wrap);

    display: block;
    position: relative;
    overflow: hidden;
    .size(@width, @height, @real_width);

    @{item_wrap_selector} {
        display: block;
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
        .size(1000%, 100%);
        .user-select(none);
    }

    @{item_selector} {
        position: relative;
        float: left;
        .size(10%, 100%);

        > a {
            position: relative;
            display: block;
            .size(auto, 100%);
        }

        > img,
        a > img {
            position: absolute; // 如果采用高度随宽度自适应的布局方式，那么Android下<img>如果需要用百分比来设置高度，则必须为绝对定位
            left: 0;
            top: 0;
            .size(100%);
        }
    }
}

// 高度自动
.banner(
    @width: 100%,
    @item_wrap: '>:first-child',
    @item: '@{item_wrap}>*') when not(isnumber(@item_wrap)) {

    @item_selector: e(@item);
    @item_wrap_selector: e(@item_wrap);

    display: block;
    overflow: hidden;
    .size(@width, auto);

    @{item_wrap_selector} {
        display: block;
        margin: 0;
        .size(1000%, auto);
        .user-select(none);
    }

    @{item_selector} {
        float: left;
        .size(10%, auto);

        > a {
            display: block;
            .size(auto, auto);
        }

        > img,
        a > img {
            .size(100%, auto);
        }
    }
}