JavaScript实现PC端横向轮播图

下面是JavaScript实现PC端横向轮播图的完整攻略：

准备工作

要实现PC端横向轮播图，需要先准备好以下几点：

HTML结构，即容器元素及其子元素，通常是一个div包裹符合数量的图片（img标签）。
CSS样式，如容器元素宽高、溢出隐藏、子元素浮动、统一宽高等。
JS代码，用来实现轮播图的滑动效果，具体实现方式后面会讲到。

实现步骤

确认容器元素的宽度和容纳的图片个数，然后设置子元素的宽度为容器宽度的1/n（n为容纳的图片个数），并将子元素浮动，实现横向排列。

.container {
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slide {
  float: left;
  width: 200px;/* 假设容纳3张图片 */
  height: 400px;
}

JS代码实现轮播图的滑动效果：
获取相关元素（容器元素、子元素、切换按钮等）。

const container = document.querySelector('.container');
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slider .slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

根据轮播图性质，需要在最后一个子元素后面复制一个子元素，实现轮播效果。

slider.appendChild(slides[0].cloneNode(true));

当前显示的图片序号为0，设置一个定时器，在一定时间间隔（如3秒）后自动滑动到下一张图片（即序号+1）。

const interval = 3000; // 时间间隔3秒
let currentSlide = 0; // 当前显示的图片序号

setInterval(() => {
  currentSlide++;
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
}, interval);

上一张和下一张图片按钮绑定事件，点击后分别切换到对应图片。

prevBtn.addEventListener('click', () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slides.length - 2;
    /* 当前为前面复制出来的最后一张图片 */
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
    setTimeout(() => {
      slider.style.transition = 'all 0.3s ease-in-out';
    }, 1);
  }
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
});

nextBtn.addEventListener('click', () => {
  currentSlide++;
  if (currentSlide > slides.length - 1) {
    currentSlide = 1;
    /* 当前为前面复制出来的第一张图片 */
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
    setTimeout(() => {
      slider.style.transition = 'all 0.3s ease-in-out';
    }, 1);
  }
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
});

示例说明

下面是两个简易的示例说明：

示例1

<div class="container">
  <div class="slider">
    <div class="slide"><img src="1.jpg" alt=""></div>
    <div class="slide"><img src="2.jpg" alt=""></div>
    <div class="slide"><img src="3.jpg" alt=""></div>
    <div class="slide"><img src="4.jpg" alt=""></div>
    <div class="slide"><img src="5.jpg" alt=""></div>
  </div>
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>

.container {
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slide {
  float: left;
  width: 200px;
  height: 400px;
}

const container = document.querySelector('.container');
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slider .slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

slider.appendChild(slides[0].cloneNode(true));

const interval = 3000;
let currentSlide = 0;

setInterval(() => {
  currentSlide++;
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
}, interval);

prevBtn.addEventListener('click', () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slides.length - 2;
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
    setTimeout(() => {
      slider.style.transition = 'all 0.3s ease-in-out';
    }, 1);
  }
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
});

nextBtn.addEventListener('click', () => {
  currentSlide++;
  if (currentSlide > slides.length - 1) {
    currentSlide = 1;
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
    setTimeout(() => {
      slider.style.transition = 'all 0.3s ease-in-out';
    }, 1);
  }
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
});

示例2

<div class="container">
  <div class="slider">
    <div class="slide"><img src="1.jpg" alt=""></div>
    <div class="slide"><img src="2.jpg" alt=""></div>
    <div class="slide"><img src="3.jpg" alt=""></div>
    <div class="slide"><img src="4.jpg" alt=""></div>
    <div class="slide"><img src="5.jpg" alt=""></div>
  </div>
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>

.container {
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slide {
  float: left;
  width: 200px;
  height: 300px;
}

const container = document.querySelector('.container');
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slider .slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

slider.appendChild(slides[0].cloneNode(true));

const interval = 2000;
let currentSlide = 0;

setInterval(() => {
  currentSlide++;
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
}, interval);

prevBtn.addEventListener('click', () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slides.length - 2;
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
    setTimeout(() => {
      slider.style.transition = 'all 0.3s ease-in-out';
    }, 1);
  }
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
});

nextBtn.addEventListener('click', () => {
  currentSlide++;
  if (currentSlide > slides.length - 1) {
    currentSlide = 1;
    slider.style.transition = 'none';
    slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
    setTimeout(() => {
      slider.style.transition = 'all 0.3s ease-in-out';
    }, 1);
  }
  slider.style.transform = `translateX(${-currentSlide * slides[0].offsetWidth}px)`;
});

以上就是实现PC端横向轮播图的完整攻略，需要注意的就是CSS样式和JS代码的实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现PC端横向轮播图 - Python技术站