原生js实现焦点轮播图效果

实现焦点轮播图效果的完整攻略包含以下几个步骤：

步骤一：HTML结构代码搭建

我们需要先创建HTML结构代码。-html代码的结构分为两部分。一是包含轮播图内容的ul标签，二是包含焦点图点点的ol标签。代码如下：

<div class="slider">
  <ul class="slides">
    <li><img src="图片1"></li>
    <li><img src="图片2"></li>
    <li><img src="图片3"></li>
    ...
  </ul>
  <ol class="dots">
    <li></li>
    <li></li>
    <li></li>
    ...
  </ol>
</div>

其中，class为slider的div标签是为了整个轮播图的CSS布局设立的。

步骤二：CSS样式代码编写

在两个标签的HTML结构搭建完成之后，我们要为其编写CSS样式。我们需要将图片轮播的区域设置为图片所在li标签的宽度和高度，用CSS实现轮播图的自适应宽度和高度。

.slider {
  position: relative;
  height: 400px; /* 轮播图高度自己设定，为了方便，我们设定为400px */
  overflow: hidden;
  white-space: nowrap; /* li标签横向排列 */
}
.slider .slides {
  position: relative;
  height: 100%;
  width: 10000px;
  left: 0;
  -webkit-transition: left .5s;
  transition: left .5s; /* 添加过渡效果 */
}
.slider .slides li {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

上述代码主要是设置轮播图的CSS样式并将li标签设置为inline-block横向排列。

步骤三：JS代码编写

在第一步和第二步完成之后，我们需要编写Javascript来控制轮播图效果。我们需先把所有图片都放在一个数组中，再控制轮播图每次播放的位置及轮播点的切换。

window.onload = function () {
  var slider = document.querySelector('.slider');
  var slides = document.querySelector('.slides').querySelectorAll('li');
  var dots = document.querySelector('.dots');
  var index = 0;
  // 获取slide li标签的数量
  var len = slides.length;
  // 定时器对象
  var timer = null;

  // 循环向ol中添加li标签作为轮播图点点
  for (var i = 0; i < len; i++) {
    var li = document.createElement('li');
    li.index = i;
    dots.appendChild(li);
  }

  // 焦点图点点样式设置
  dots.style.marginTop = -dots.offsetHeight/2 + 'px';
  dots.children[index].className = 'active';

  // 克隆第一张图片及最后一张图片
  var firstSlid = slides[0].cloneNode(true);
  var lastSlid = slides[len-1].cloneNode(true);
  document.querySelector('.slides').appendChild(firstSlid);
  document.querySelector('.slides').insertBefore(lastSlid,slides[0]);

  // 为每个点点设置鼠标移入事件
  for (var i = 0; i < dots.children.length; i++) {
    dots.children[i].onmouseover = function () {
      clearInterval(timer);
      // 排除当前图片
      if (this.index != index) {
        index = this.index;
        switchSlide(index);
        switchActive(index);
      }
      timer = setInterval(auto,2000);
    }
  }

  // 自动轮播和点点切换
  function auto() {
    index++;
    switchSlide(index);
    switchActive(index);
  }

  // 切换图片位置
  function switchSlide(index) {
    slides[0].style.marginLeft = -slides[0].offsetWidth*index+'px';
    slider.querySelector('.slides').style.transform = 'translateX('+((-index-1)/len*100)+'%)';
  }

  // 切换点点的样式
  function switchActive(index) {
    for (var i = 0; i < dots.children.length; i++) {
      dots.children[i].className = '';
    }
    dots.children[index].className = 'active';
  }

  // 触碰到slider调用stopPlay
  slider.onmouseenter = stopPlay;
  // 移出slider调用startPlay
  slider.onmouseleave = startPlay;

  // 停止播放
  function stopPlay() {
    clearInterval(timer);
  }
  // 开始播放
  function startPlay() {
    timer = setInterval(auto,2000);
  }
  // 设置定时器
  startPlay();
}

代码中我们获取整个slider的HTML元素和通过通过获取其子元素来控制每张幻灯片的位置。在自动播放的过程中，通过设置setTimeout函数来实现每隔一定时间切换轮播图。同时，在鼠标移上去停止播放，离开的时候重新开始播放。

示例一

参考链接：codesandbox

示例二

参考链接：codesandbox