1.实现效果

GIF.gif

2.实现原理

根据数组的长度和一个div的宽度，计算出父元素的长度。

document.getElementById("goods_bx").style.width=goods_list.length * 271 + 'px';

当点击上一张或下一张的时候，设置他的margin-left。

document.getElementById("goods_bx").style.marginLeft=mr * 271 + 'px';

为这个父元素再添加一个父元素，设置他的overflow-x为scroll。

.container_bx .r_goods_box .r_cen {
    flex: 1;
    overflow-x: scroll;
    scrollbar-width: none;//火狐浏览器
}

去掉自带的滚动条

.r_cen::-webkit-scrollbar {
    display: none;
}

3.实现代码

<div>
    <div class="container_bx">
            <div class="r_goods_box flex-row">
                <img src="img/s_left.png" class="ge_icon" id="leftMove" />
                <div class="r_cen">
                    <div class="flex-row goods_bx" id="goods_bx"></div>
                </div>
                <img src="img/s_right.png" class="ge_icon" id="rightMove" />
            </div>
        </div>
    </div>

.container_bx {
    margin: 100px auto;
    width: 1200px;

    div {
        box-sizing: border-box;
    }

    .r_goods_box {
        background: #ffffff;
        margin-bottom: 66px;

        .r_cen::-webkit-scrollbar {
            display: none;
        }

        .r_cen {
            flex: 1;
            overflow-x: scroll;
            scrollbar-width: none;
        }

        .goods_bx {
            .g_r_item {
                width: 271px;
            }

            .g_item {
                width: 253px;
                background: #ffffff;
                border-radius: 4px 4px 0 0;
                margin-right: 12px;

                .g_price {
                    font-size: 18px;
                    color: #d60000;
                }

                .g_name {
                    width: 215px;
                    font-size: 16px;
                    color: #333333;
                    margin-bottom: 7px;
                }

                .g_i_img {
                    width: 253px;
                    height: 254px;
                    border-radius: 4px;
                    margin-bottom: 10px;
                }

                .cart_icon {
                    width: 26px;
                    height: 26px;
                    margin-left: 24px;
                }
            }
        }

        .ge_icon {
            width: 41px;
            height: 41px;
            margin-right: 27px;
            border: 1px solid #f6f6f6;
            border-radius: 50%;
        }

        .ge_icon:hover {
            border: 1px solid #519551;
        }

        .ge_icon:last-child {
            margin-right: 0;
            margin-left: 27px;
        }
    }
}

var mr = 0;
var goods_list=[...数据]
var content='';
        goods_list.forEach((item,index)=>{
        content += ' <div class="g_r_item">';
        content += ' <div class="g_item flex-column">'
        content += '<img src=' + item.img + ' class="g_i_img" />'
        content += '<div class="flex-row">'
        content += ' <p class="g_name text_ellipsis">' + item.name + '</p>'
        content += '</div>'
        content += ' <div class="flex-row">'
        content += '<p class="g_price">¥' + item.price + '</p>'
        content += '<img src="img/cart.png" class="cart_icon" />'
        content += '</div>'
        content += '</div>'
        content += '</div>'
        document.getElementById("goods_bx").innerHTML =content;
    })
    document.getElementById("goods_bx").style.width=goods_list.length * 271 + 'px';
    document.getElementById("goods_bx").style.marginLeft=mr * 271 + 'px';
        
    document.getElementById("leftMove").onclick=function(){
        console.log(mr)
        if (mr < 0) {
            mr += 1;
        }
        document.getElementById("goods_bx").style.marginLeft=mr * 271 + 'px';
    }
    
    document.getElementById("rightMove").onclick=function(){
        console.log(mr)
        if (mr > -(goods_list.length + mr)) {
            mr -= 1;
        }
        document.getElementById("goods_bx").style.marginLeft=mr * 271 + 'px';
    }