JS点击按钮图片左右滑动

使用rem单位：1rem = 80px

<div class="click_page">
	<div class="center_img" style="left: 0px;">
		<div class="page_info">
			<a href="javascript:;">
				<video src="./images/section/explore/1.mp4" muted="muted" onMouseOver="this.play()"
					onMouseOut="this.pause()" class="video"></video>
				<p style="font-size: .225rem;font-weight: bold;margin-top: .125rem;display: block;">
					探索Reno系列
				</p>
				<p style="line-height: 25px;">在我眼睛里会发光</p>
			</a>
		</div>
		<div class="page_info"><a href="javascript:;">
				<img src="./images/section/explore/1.jpg"></img>
				<p style="font-size: .225rem;font-weight: bold;margin-top: .125rem;">线下体验店</p>
				<p style="line-height: 25px;">查看附近体验店，了解会员权益</p>
			</a></div>
		<div class="page_info"><a href="javascript:;">
				<img src="./images/section/explore/2.jpg"></img>
				<p style="font-size: .225rem;font-weight: bold;margin-top: .125rem;">O学堂</p>
				<p style="line-height: 25px;">立刻报名摄影课程，发现生活中的美</p>
			</a>
		</div>
		<div class="page_info"><a href="javascript:;">
				<img src="./images/section/explore/3.jpg"></img>
				<p style="font-size: .225rem;font-weight: bold;margin-top: .125rem;">会员日</p>
				<p style="line-height: 25px;">参与每月16-18日会员日活动</p>
			</a></div>
		<div class="page_info"><a href="javascript:;">
				<video src="./images/section/explore/2.mp4" muted="muted" onMouseOver="this.play()"
					onMouseOut="this.pause()" class="video"></video>
				<p style="font-size: .225rem;font-weight: bold;margin-top: .125rem;">万物互溶</p>
				<p style="line-height: 25px;">OPPO随享，美好生活随时分享</p>
			</a>
		</div>
		<div class="page_info"><a href="javascript:;">
				<img src="./images/section/explore/4.jpg"></img>
				<p style="font-size: .225rem;font-weight: bold;margin-top: .125rem;">留住消失的色彩</p>
				<p style="line-height: 25px;">与地理国家深度合作，致力保护濒危物种</p>
			</a></div>
    </div>
  </div>

.click_page {
  width: 16.1375rem;
  height: 8rem;
  position: relative;
  left: 3.75rem;
  overflow: hidden;
}
.click_page .center_img {
  flex-direction: row;
  position: absolute;
  float: left;
  width: 33.625rem;
  margin-top: 1rem;
  height: 4.8rem;
}
.click_page .center_img .page_info {
  float: left;
  height: 4.5rem;
  margin: 0.125rem;
  margin-left: 0px;
}
.click_page .center_img .page_info a {
  color: black;
}
.click_page .center_img .page_info a div {
  clear: both;
}
.click_page .center_img .page_info a img {
  width: 5.3125rem;
  height: 3.5375rem;
}
.click_page .center_img .page_info a video {
  width: 5.3125rem;
  height: 3.5375rem;
}

重点：center_img.style.left需要在center_img节点中添加style的left属性,不然无法获取
如：<div class="center_img" style="left: 0px;">,不多介绍,详情可以去看dom获数据的过程

window.onload = function () {
    // 图片左右滑动
    var center_img = document.querySelector('.center_img')
    var btn_page = document.querySelectorAll('.btn_page')
    var left_number = 0
    function animate(offset) {
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
        //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
		//center_img.style.left需要在center_img节点中添加style的left属性,不然无法获取
        var newLeft = parseInt(center_img.style.left) + offset;
        center_img.style.left = newLeft + 'px';
        left_number = newLeft
        console.log(newLeft);
    }
    // 向左按钮
    btn_page[0].onclick = function () {
        if (left_number == 0) {
            btn_page[0].style.disabled = true
        } else {
            animate(433);
        }

    }
    // 向右按钮
    btn_page[1].onclick = function () {
        if (left_number <= -1299) {
            btn_page[1].style.disabled = true
        } else {
            animate(-433);
        }

    }
}