当前位置：首页 > 行业动态 > 正文

html手动滑动图片

admin
行业动态
2025-05-03
4259

通过HTML+CSS+JS实现：1. HTML布局图片容器；2. CSS设置overflow:hidden并横向排列图片；3. JS监听鼠标/触屏拖动事件，动态计算偏移量改变transform属性

实现思路

通过HTML结构布局图片容器,CSS控制图片的显示与隐藏，结合JavaScript监听用户操作（如按钮点击），动态切换图片的展示。

HTML结构

<div class="slide-container">  
  <div class="slides">  
    <img src="image1.jpg" alt="图1" class="slide">  
    <img src="image2.jpg" alt="图2" class="slide">  
    <img src="image3.jpg" alt="图3" class="slide">  
  </div>  
  <button class="prev">&lt;</button>  
  <button class="next">&gt;</button>  
</div>

说明：

html手动滑动图片第1张

.slide-container：图片轮播的外层容器。
.slides：包含所有图片的子容器，用于控制图片的排列。
.slide：单张图片，默认重叠显示。
.prev 和 .next：切换图片的按钮。

CSS样式

.slide-container {  
  position: relative;  
  width: 600px; / 容器宽度 /  
  height: 400px; / 容器高度 /  
  overflow: hidden; / 隐藏超出部分 /  
}  
.slides {  
  display: flex;  
  transition: transform 0.5s ease; / 滑动动画 /  
}  
.slide {  
  min-width: 100%; / 每张图片占满容器宽度 /  
  height: 100%;  
}  
.prev, .next {  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
  background: rgba(0,0,0,0.5);  
  color: white;  
  border: none;  
  padding: 10px;  
  cursor: pointer;  
}  
.prev { left: 0; }  
.next { right: 0; }

说明：

.slides 使用 flex 布局横向排列图片，通过 transform 属性平移实现切换。
.slide 设置最小宽度为容器宽度，确保单张图片铺满容器。
按钮通过 position: absolute 定位在容器两侧。

JavaScript逻辑

const slides = document.querySelector('.slides');  
const images = document.querySelectorAll('.slide');  
const prevBtn = document.querySelector('.prev');  
const nextBtn = document.querySelector('.next');  
let currentIndex = 0; // 当前显示的图片索引  
function updateSlidePosition() {  
  slides.style.transform = `translateX(-${currentIndex  100}%)`;  
}  
prevBtn.addEventListener('click', () => {  
  currentIndex = (currentIndex > 0) ? currentIndex 1 : images.length 1;  
  updateSlidePosition();  
});  
nextBtn.addEventListener('click', () => {  
  currentIndex = (currentIndex < images.length 1) ? currentIndex + 1 : 0;  
  updateSlidePosition();  
});

说明：

currentIndex 记录当前显示的图片索引。
updateSlidePosition 通过 transform: translateX 平移 .slides 容器，显示对应图片。
按钮点击时更新 currentIndex，并调用 updateSlidePosition。

完整示例代码

<!DOCTYPE html>  
<html lang="zh">  
<head>  
  <meta charset="UTF-8">  手动滑动图片</title>  
  <style>  
    / CSS代码（同上） /  
  </style>  
</head>  
<body>  
  <div class="slide-container">  
    <div class="slides">  
      <img src="image1.jpg" alt="图1" class="slide">  
      <img src="image2.jpg" alt="图2" class="slide">  
      <img src="image3.jpg" alt="图3" class="slide">  
    </div>  
    <button class="prev">&lt;</button>  
    <button class="next">&gt;</button>  
  </div>  
  <script>  
    // JavaScript代码（同上）  
  </script>  
</body>  
</html>