需求：图片通过按钮左右滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style>
#box {
width:800px;
height:200px;
border:2px solid orange;
overflow: hidden;
}
.wrapper {
width:2200px;
}
#box p {
margin:0;
width:198px;
height:198px;
float:left;
border:1px solid #ccc;
background: #369;
color:#fff;
}
</style>
</head>
<body>
<div id="box">
<div class="wrapper">
<p>lorem1</p>
<p>lorem2</p>
<p>lorem3</p>
<p>lorem4</p>
<p>lorem5</p>
<p>lorem6</p>
<p>lorem7</p>
<p>lorem8</p>
<p>lorem9</p>
<p>lorem10</p>
<p>lorem11</p>
</div>
</div>
<br>
<button id="left_btn"> < </button>
<button id="right_btn"> > </button>
<script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
$('#left_btn').on('click', function(){
//console.log($('#box').scrollLeft())
// $('#box').scrollLeft(800);//是把 scrollLeft 设置为800
$('#box').scrollLeft($('#box').scrollLeft() + 800);
});
$('#right_btn').on('click', function(){
$('#box').scrollLeft($('#box').scrollLeft() - 800 )
})
})
</script>
</body>
</html>