将其宽度设置为4张图片宽度之和，然后将其子元素（图片）的宽度设置为单张图片宽度，并设置float为left。最后，将容器的overflow属性设置为hidden，实现轮播效果 完整代码

好的，下面是一个简单的完整代码示例，实现同时显示4张图片的轮播图：

HTML：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
</div>

CSS：

.slider {
  width: 800px; /* 4张图片宽度之和 */
  overflow: hidden;
}

.slider img {
  width: 200px; /* 单张图片宽度 */
  float: left;
}

JavaScript：

// 获取轮播图容器和图片元素
var slider = document.querySelector('.slider');
var sliderImgs = document.querySelectorAll('.slider img');

// 定义图片索引和轮播定时器
var index = 0; // 当前图片索引
var timer = null; // 轮播定时器

// 定义自动轮播函数
function autoSlide() {
  // 隐藏当前图片
  sliderImgs[index].style.display = 'none';
  // 切换到下一张图片
  index = (index + 1) % sliderImgs.length;
  // 显示下一张图片
  sliderImgs[index].style.display = 'block';
}

// 启动自动轮播
timer = setInterval(autoSlide, 3000);

// 鼠标移入停止自动轮播，移出恢复自动轮播
slider.addEventListener('mouseover', function() {
  clearInterval(timer);
});
slider.addEventListener('mouseout', function() {
  timer = setInterval(autoSlide, 3000);
});

这个示例中，通过JavaScript实现了自动轮播和鼠标悬停停止轮播的功能。你可以根据实际需求对代码进行修改和完善。