js实现滑动轮播效果

当我们需要在网站中展示多个幻灯片图片时，掌握JavaScript实现滑动轮播效果非常重要。以下是实现此效果的完整攻略：

当我们需要在网站中展示多个幻灯片图片时，掌握JavaScript实现滑动轮播效果非常重要。以下是实现此效果的完整攻略：

步骤一： HTML结构

在HTML中创建一个轮播区域，它包含一个有序列表，以及向前和向后按钮。

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slide"> <img src="img1.jpg" /> </li>
    <li class="slide"> <img src="img2.jpg" /> </li>
    <li class="slide"> <img src="img3.jpg" /> </li>
    <li class="slide"> <img src="img4.jpg" /> </li>
  </ul>
  <a href="#" class="slider-prev">Prev</a>
  <a href="#" class="slider-next">Next</a>
</div>

步骤二： CSS

接下来，添加CSS样式，以便在页面中呈现轮播效果。首先，将幻灯片中的每个列表项横向对齐。然后，使用绝对定位将每个幻灯片对齐到轮播器。最后，隐藏幻灯片中的滚动条，以确保幻灯片填充整个容器。

.slider {
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  position: relative;
  width: 300%;
  margin: 0;
  padding: 0;
  left: 0;
  list-style: none;
  transition: left 0.5s;
}

.slide {
  float: left;
  width: 33.3333%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
}

a.slider-prev, a.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  z-index: 1;
}

a.slider-prev {
  left: 0;
}

a.slider-next {
  right: 0;
}

::-webkit-scrollbar {
  display: none;
}

步骤三： JavaScript

现在，需要添加JavaScript代码以实现轮播效果。首先，为按钮添加单击事件侦听器，并在单击事件触发时使用CSS属性left轮流滑动轮播器。定时器将幻灯片向右或向左移动，具体取决于是单击“下一页”按钮还是“上一页”按钮。

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderPrev = document.querySelector('.slider-prev');
const sliderNext = document.querySelector('.slider-next');
let slideWidth = document.querySelector('.slide').offsetWidth;
let slideIndex = 0;

sliderPrev.addEventListener('click', function(e){
  e.preventDefault();

  slideIndex = slideIndex > 0 ? slideIndex - 1 : 0;
  sliderWrapper.style.left = slideIndex * (-slideWidth) + 'px';
});

sliderNext.addEventListener('click', function(e){
  e.preventDefault();

  slideIndex = slideIndex < 3 ? slideIndex + 1 : 3;
  sliderWrapper.style.left = slideIndex * (-slideWidth) + 'px';
});

setInterval(function(){
  slideIndex = slideIndex < 3 ? slideIndex + 1 : 0;
  sliderWrapper.style.left = slideIndex * (-slideWidth) + 'px';
}, 3000);

示例说明

示例一： 每隔一定时间自动轮播

上述JavaScript代码中，使用setInterval()方法在每隔3秒轮流滑动幻灯片并实现自动轮播效果。

示例二： 实现无限滑动

上述JavaScript代码中，通过判断当前滑动幻灯片的位置，从而实现循环滑动的效果。例如，当到达最后一张图片后，再向右单击“下一页”按钮时，将把幻灯片列表位置的CSS属性设置为0，从而实现无限滑动。