原生js轮播特效

原生JS轮播特效是一种常见的网页设计效果，下面是一些实现的步骤和示例：

步骤

创建HTML布局
要实现轮播特效，需要一个包含轮播图片的容器和一组控制轮播的选择器。这个容器可以是一个div或ul元素。
设置CSS样式
设置容器和选择器的CSS样式，包括宽度，高度，颜色，字体大小和间距等。
编写JavaScript代码
3.1 获取容器和选择器元素的引用
3.2 给选择器元素绑定事件，当选择器被点击时，切换到相应的图片
3.3 定义一个计时器，控制图片的自动轮播。设置时间间隔和动画效果，使用setInterval()或setTimeout()函数。

示例1：基本的轮播特效

下面是一个简单的“原生JS轮播特效”的示例，步骤如下：

创建一个HTML布局如下：

<div class="slideshow">
  <ul>
    <li><img src="img1.jpg" alt="image1"></li>
    <li><img src="img2.jpg" alt="image2"></li>
    <li><img src="img3.jpg" alt="image3"></li>
  </ul>
  <div class="selector">
    <span data-index="0"></span>
    <span data-index="1"></span>
    <span data-index="2"></span>
  </div>
</div>

设置CSS样式

.slideshow {
  position: relative;
  width: 600px;
  height: 400px;
}
.slideshow ul {
  list-style: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.slideshow ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.slideshow ul li.active {
  opacity: 1;
}
.slideshow .selector {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.slideshow .selector span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 5px;
  cursor: pointer;
}
.slideshow .selector span.active {
  background-color: #f00;
}

编写JavaScript代码

var slideshow = document.querySelector('.slideshow');
var slider = slideshow.querySelector('ul');
var sliderItems = slider.querySelectorAll('li');
var selector = slideshow.querySelector('.selector');
var selectors = selector.querySelectorAll('span');
var currentSliderIndex = 0;
var timer;

selectors.forEach(function(s, i) {
  s.addEventListener('click', function() {
    clearInterval(timer);
    if (currentSliderIndex == i) {
      return;
    }
    selectors[currentSliderIndex].classList.remove('active');
    sliderItems[currentSliderIndex].classList.remove('active');
    currentSliderIndex = i;
    selectors[currentSliderIndex].classList.add('active');
    sliderItems[currentSliderIndex].classList.add('active');
    timer = setInterval(nextSlide, 3000);
  });
});

function nextSlide() {
  selectors[currentSliderIndex].classList.remove('active');
  sliderItems[currentSliderIndex].classList.remove('active');
  currentSliderIndex++;
  if (currentSliderIndex == sliderItems.length) {
    currentSliderIndex = 0;
  }
  selectors[currentSliderIndex].classList.add('active');
  sliderItems[currentSliderIndex].classList.add('active');
}

timer = setInterval(nextSlide, 3000);

Demo: 基本的轮播特效

示例2：带缩略图的轮播特效

下面是一个带缩略图的轮播特效的示例，步骤如下：

创建一个HTML布局如下：

<div class="slideshow2">
  <ul class="slider2">
    <li>
      <img src="img1.jpg" alt="image1">
      <div class="slider-caption">
        <h2>Title 1</h2>
        <p>Slider Description 1</p>
      </div>
    </li>
    <li>
      <img src="img2.jpg" alt="image2">
      <div class="slider-caption">
        <h2>Title 2</h2>
        <p>Slider Description 2</p>
      </div>
    </li>
    <li>
      <img src="img3.jpg" alt="image3">
      <div class="slider-caption">
        <h2>Title 3</h2>
        <p>Slider Description 3</p>
      </div>
    </li>
  </ul>
  <div class="selector2">
    <span data-index="0">
      <img src="img1.jpg" alt="image1">
    </span>
    <span data-index="1">
      <img src="img2.jpg" alt="image2">
    </span>
    <span data-index="2">
      <img src="img3.jpg" alt="image3">
      </span>
  </div>
</div>

设置CSS样式

.slideshow2 {
  position: relative;
  width: 600px;
  height: 400px;
}
.slideshow2 .slider2 {
  list-style: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.slideshow2 .slider2 li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.slideshow2 .slider2 li.active {
  opacity: 1;
}
.slideshow2 .selector2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.slideshow2 .selector2 span {
  width: 80px;
  height: 60px;
  margin: 0 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease;
}
.slideshow2 .selector2 span img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.slideshow2 .selector2 span.active {
  transform: scale(1.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(255, 0, 0, 0.4);
}

编写JavaScript代码

var slideshow2 = document.querySelector('.slideshow2');
var slider2 = slideshow2.querySelector('.slider2');
var sliderItems2 = slider2.querySelectorAll('li');
var selector2 = slideshow2.querySelector('.selector2');
var selectors2 = selector2.querySelectorAll('span');
var currentSliderIndex2 = 0;
var timer2;

selectors2.forEach(function(s, i) {
  s.addEventListener('click', function() {
    clearInterval(timer2);
    if (currentSliderIndex2 == i) {
      return;
    }
    selectors2[currentSliderIndex2].classList.remove('active');
    sliderItems2[currentSliderIndex2].classList.remove('active');
    currentSliderIndex2 = i;
    selectors2[currentSliderIndex2].classList.add('active');
    sliderItems2[currentSliderIndex2].classList.add('active');
    timer2 = setInterval(nextSlide2, 3000);
  });
});

function nextSlide2() {
  selectors2[currentSliderIndex2].classList.remove('active');
  sliderItems2[currentSliderIndex2].classList.remove('active');
  currentSliderIndex2++;
  if (currentSliderIndex2 == sliderItems2.length) {
    currentSliderIndex2 = 0;
  }
  selectors2[currentSliderIndex2].classList.add('active');
  sliderItems2[currentSliderIndex2].classList.add('active');
}

timer2 = setInterval(nextSlide2, 3000);

Demo: 带缩略图的轮播特效

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js轮播特效 - Python技术站