原生js实现上一张图片和下一张点击

时间：2023-03-26 21:04:03 JavaScript

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;溢出-x：滚动；scrollbar-width:none;//火狐浏览器}去掉自带的滚动条.r_cen::-webkit-scrollbar{display:none;}3.现实代码

.container_bx{边距：100px自动；宽度：1200px；div{框大小调整：边框框；}.r_goods_box{背景：#ffffff；底部边距：66px；.r_cen::-webkit-scrollbar{显示：无；}.r_cen{flex:1;溢出-x：滚动；滚动条宽度：无；}.goods_bx{.g_r_item{宽度：271px；}.g_item{宽度：253px；背景：#ffffff；边界半径：4px4px00；右边距：12px；.g_price{字体大小：18px；颜色：#d60000；}.g_name{宽度：215px；字体大小：16px；颜色：#333333；底部边距：7px；}.g_i_img{宽度：253px；高度：254px；边界半径：4px；底部边距：10px；}.cart_icon{宽度：26px；高度：26px；左边距：24px；}}}.ge_icon{宽度：41px；高度：41px；右边距：27px；边框：1px实心#f6f6f6；边界半径：50%；}.ge_icon:hover{border:1pxsolid#519551;}.ge_icon:last-child{margin-right:0;左边距：27px；}}}varmr=0;vargoods_list=[...数据]varcontent='';goods_list.forEach((item,index)=>{content+='';content+=''content+=''content+=''content+=''+item.name+'

'content+=''content+=''content+='￥'+item.price+'

'内容+=''content+=''content+=''content+=''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案例（创造不易，尊重原创）https://gitee.com/susuhhhhhh/css_demos

上一篇：JS发送HTTP请求的方法

下一篇：2.5D配置案例集锦-智慧园区、数据中心、SMT产线、汽车制造_0

原生js实现上一张图片和下一张点击相关文章