css点击按钮左右滑动

CSS点击按钮左右滑动是一种非常常见的交互效果，它可以为网站和应用程序增加一些动态感，使用户操作更加舒适和便捷。

下面以一个简单的实例来介绍如何使用CSS实现点击按钮左右滑动功能：

HTML代码：
<div class="slider">
  <div class="slider-container">
  
  <div class="slider-item">
  
   
 <img src="image1.jpg">
  
  </div>
  
  <div class="slider-item">
  
   
 <img src="image2.jpg">
  
  </div>
  
  <div class="slider-item">
  
   
 <img src="image3.jpg">
  
  </div>
  </div>
  <div class="slider-buttons">
  
  <button class="slider-prev">上一张</button>
  
  <button class="slider-next">下一张</button>
  </div>
</div>
CSS代码：
.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
}
.slider-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 1800px;
  height: 400px;
  display: flex;
  transition: all .5s ease-in-out;
}
.slider-item {
  flex: none;
  width: 600px;
  height: 400px;
}
.slider-buttons {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
}
.slider-prev, .slider-next {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  outline: none;
  cursor: pointer;
  transform: translateY(-50%);
}
.slider-prev:hover, .slider-next:hover {
  background-color: #333;
}
.slider-prev {
  float: left;
}
.slider-next {
  float: right;
}
JavaScript代码：
var container = document.querySelector('.slider-container');
var prevBtn = document.querySelector('.slider-prev');
var nextBtn = document.querySelector('.slider-next');
var items = document.querySelectorAll('.slider-item');
var currentIndex = 0;
var itemWidth = items[0].offsetWidth;
var itemCount = items.length;
container.style.width = itemWidth * itemCount + 'px';
prevBtn.addEventListener('click', function() {
  currentIndex = (currentIndex > 0) ? currentIndex - 1 : itemCount - 1;
  container.style.transform = 'translateX(' + (-itemWidth * currentIndex) + 'px)';
}
);
nextBtn.addEventListener('click', function() {
  currentIndex = (currentIndex < itemCount - 1) ? currentIndex + 1 : 0;
  container.style.transform = 'translateX(' + (-itemWidth * currentIndex) + 'px)';
}
);
 

以上便是CSS点击按钮左右滑动的实现过程，通过CSS布局和JavaScript事件绑定，我们可以轻松实现这一交互效果，增强用户体验，提升网站和应用程序的品质。