使用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);
}
}
}