页面有十张图片，首页默认显示5张，当点击往右按钮后，页面切换后5张，点击往左按钮，页面又显示原来的前5张

这个功能可以通过使用 JavaScript 和 CSS 来实现。你可以创建一个图片容器，设置其宽度为一定的值，然后将包含图片的 ul 元素放置在容器内。通过设置 ul 元素的 left 属性来实现图片的切换效果。

首先，你需要创建一个包含所有图片的 ul 元素，并设置其宽度为单张图片的宽度乘以图片数量。然后，设置容器的 overflow 属性为 hidden，这样超出容器宽度的部分就会被隐藏起来。

接下来，在 JavaScript 中，你可以监听往右和往左按钮的点击事件，并通过修改 ul 元素的 left 属性来实现图片的切换效果。往右按钮点击后，将 ul 元素的 left 属性减去单张图片的宽度，往左按钮点击后，将 left 属性加上单张图片的宽度。

以下是一个简单的示例代码：

HTML:

<div class="container">
  <ul class="image-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
    <li><img src="image6.jpg"></li>
    <li><img src="image7.jpg"></li>
    <li><img src="image8.jpg"></li>
    <li><img src="image9.jpg"></li>
    <li><img src="image10.jpg"></li>
  </ul>
</div>
<button id="prevButton">往左</button>
<button id="nextButton">往右</button>

CSS:

.container {
  width: 500px;
  overflow: hidden;
}

.image-list {
  list-style: none;
  width: 5000px; /* 每张图片宽度乘以图片数量 */
  padding: 0;
  margin: 0;
}

.image-list li {
  float: left;
}

.image-list li img {
  width: 500px; /* 单张图片宽度 */
}

JavaScript:

var imageList = document.querySelector('.image-list');
var prevButton = document.getElementById('prevButton');
var nextButton = document.getElementById('nextButton');

var imageWidth = imageList.querySelector('li').offsetWidth;
var currentLeft = 0;

prevButton.addEventListener('click', function() {
  if (currentLeft < 0) {
    currentLeft += imageWidth;
    imageList.style.left = currentLeft + 'px';
  }
});

nextButton.addEventListener('click', function() {
  if (currentLeft > -(imageList.offsetWidth - imageWidth)) {
    currentLeft -= imageWidth;
    imageList.style.left = currentLeft + 'px';
  }
});

这是一个基本实现的示例，你可以根据自己的需求进行修改和优化。希望对你有帮助！