html中，图片轮播样式设成左右滑动的样式怎样设置

要实现左右滑动的图片轮播效果，可以使用CSS3的transform属性和transition属性来实现。具体步骤如下：

1. HTML结构部分：在HTML文件中添加一个包含多个图片的容器，并设置容器的宽度为所有图片宽度之和。

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

2. CSS样式部分：设置容器的样式，包括宽度、高度、overflow属性等。同时设置图片的样式，包括宽度、高度、浮动方向等。最后使用transform和transition属性来实现图片的左右滑动效果。

.slider {
  width: 900px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.slider img {
  width: 900px;
  height: 400px;
  float: left;
}
.slider img:first-child {
  margin-left: 0;
}
.slider img:last-child {
  margin-right: 0;
}
.slider img.active {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}
.slider img.prev {
  transform: translateX(-900px);
  transition: transform 0.5s ease-in-out;
}
.slider img.next {
  transform: translateX(900px);
  transition: transform 0.5s ease-in-out;
}

3. JavaScript部分：使用JavaScript来控制图片的滑动效果。通过给当前图片添加active类名，同时给前后图片添加prev和next类名，然后通过修改它们的transform属性来实现左右滑动效果。

var slider = document.querySelector('.slider');
var images = document.querySelectorAll('.slider img');
var currentIndex = 0;

function slideNext() {
  images[currentIndex].classList.remove('active');
  images[currentIndex].classList.add('prev');
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  images[currentIndex].classList.add('active');
  images[currentIndex].classList.remove('next');
}

function slidePrev() {
  images[currentIndex].classList.remove('active');
  images[currentIndex].classList.add('next');
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }
  images[currentIndex].classList.add('active');
  images[currentIndex].classList.remove('prev');
}

setInterval(slideNext, 3000);

这样就实现了一个简单的左右滑动的图片轮播效果。