html原生js实现图片轮播代码

HTML原生JS实现图片轮播
轮播是Web开发中很常见的功能，不同的轮播方式也有很多种，其中图片轮播是较为常见的一种。下面我们来看一下如何使用HTML原生JS实现图片轮播。

首先需要在HTML中设定好轮播的页面结构，常用的方式是使用

和
• 标签来定义图片展示区域和小圆点导航。代码如下：

  <div class="slider">
    <ul class="slider-list">
      <li class="slider-item"><img src="img1.jpg" alt="图片1"></li>
      <li class="slider-item"><img src="img2.jpg" alt="图片2"></li>
      <li class="slider-item"><img src="img3.jpg" alt="图片3"></li>
    </ul>
    <div class="slider-nav">
      <span class="nav-item active"></span>
      <span class="nav-item"></span>
      <span class="nav-item"></span>
    </div>
  </div>
  

  接着，使用JS来实现轮播效果，主要包括切换图片和小圆点导航的激活状态。代码如下：

  var slider = document.querySelector('.slider');
  var sliderList = document.querySelector('.slider-list');
  var sliderItems = document.querySelectorAll('.slider-item');
  var sliderNav = document.querySelector('.slider-nav');
  var navItems = document.querySelectorAll('.nav-item');
  var len = sliderItems.length;
  var index = 0;
  
  // 切换图片函数
  function switchSliderItem() {
    for (var i = 0; i < len; i++) {
      sliderItems[i].classList.remove('active');
      navItems[i].classList.remove('active');
    }
    sliderItems[index].classList.add('active');
    navItems[index].classList.add('active');
  }
  
  // 自动轮播函数
  function autoplay() {
    index++;
    if (index >= len) {
      index = 0;
    }
    switchSliderItem();
  }
  
  setInterval(autoplay,3000);
  
  // 点击导航切换图片
  sliderNav.addEventListener('click',function(e) {
    var target = e.target;
    if (target.tagName === 'SPAN') {
      index = +target.dataset.index;
      switchSliderItem();
    }
  });
  

  在代码中，首先选择轮播相关的DOM元素，并定义了图片的数量和当前轮播的索引值。然后创建了一个切换图片和激活导航的函数，在自动轮播和点击导航切换的过程中不断调用该函数即可。

  最后，我们需要在CSS中设定好轮播效果的样式，包括图片的位置和大小、导航的样式等。代码如下：

  .slider {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
  }
  .slider-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 600px;
    height: 400px;
    margin: 0;
    padding: 0;
  }
  .slider-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 600px;
    height: 400px;
    margin: 0;
    padding: 0;
    transition: all 0.5s ease;
    opacity: 0;
    z-index: 0;
  }
  .slider-item.active {
    opacity: 1;
    z-index: 1;
  }
  .slider-nav {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 100px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-item {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    transition: all 0.5s ease;
  }
  .nav-item.active {
    background: red;
  }
  

  通过CSS样式的设置，我们可以让图片呈现出滑动的效果，并设定导航样式的变化，让用户可以更直观地感受到轮播的切换。

  上面就是使用HTML原生JS实现图片轮播的完整代码，通过这个案例的学习，相信我们可以更好地掌握Web开发中常见的轮播效果。