1.实现效果
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';}
4.更多web案例（创造不易，尊重原创）
/susuhhhhhh/css_demos
