JavaScript 自适应轮播图

代码

话不多说，先上代码，方便复制粘贴。演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    img {
      display: block;
       100%;
      height: 100%;
    }

    .content {
       1080px;
      margin: 100px auto;
    }

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

    .banner>div {
       790px;
      position: absolute;
      transform: translateX(140px) scale(0.8);
      transform-origin: center bottom;
      transition: .4s;
    }

    .banner .first_item {
      z-index: 10;
      transform: translateX(140px) scale(1);
    }

    .banner .second_item {
      z-index: 1;
      transform: translateX(540px) scale(0.8);
    }

    .banner .last_item {
      z-index: 1;
      transform: translateX(-250px) scale(0.8);
    }

    /* 左右切换按钮 */
    .btn {
       40px;
      height: 40px;
      position: absolute;
      top: 60%;
      margin-top: -20px;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
      text-align: center;
      color: rgba(255, 255, 255, 0.6);
      line-height: 40px;
      font-size: 20px;
      font-style: normal;
      cursor: pointer;
      user-select: none;
    }

    .btn_right {
      right: 0;
    }

    .btn:hover {
      background-color: rgba(0, 0, 0, 0.4);
      color: rgba(255, 255, 255, 1);
    }

    /* banner状态点 */
    .track {
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    .track>span {
      display: block;
       25px;
      height: 4px;
      background-color: #ccc;
      float: left;
      margin: 10px 6px;
      transition: .4s;
    }

    .track .focus {
      background-color: #c60023;
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="banner">
      <div class="first_item">
        <a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
      </div>
      <div class="second_item">
        <a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
      </div>
      <div class="">
        <a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
      </div>
      <div class="">
        <a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
      </div>
      <div class="last_item">
        <a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
      </div>
      <!-- 这里切换按钮用大于小于号代替，如果自己有icon图标自行替换 -->
      <i class="btn_left btn"><</i>
      <i class="btn_right btn">></i>
    </div>
    <div class="track"></div>
  </div>
  <script>
    window.onload = function () {
      // 获取节点，变量声明
      var banner = document.querySelector('.banner'),
        btn_left = document.querySelector('.btn_left'),
        btn_right = document.querySelector('.btn_right'),
        track = document.querySelector('.track'),
        list_items = banner.querySelectorAll('div'),
        listArr = [],
        index = 0,
        trackHtml = '',
        tracks,
        timer;
      // 初始化
      function init() {
        // 根据图片高度自适应
        banner.style.height = list_items[0].offsetHeight + 'px';
        // 生成track坐标点元素
        for (var i = 0, len = list_items.length; i < len; i++) {
          listArr.push(list_items[i].className)
          trackHtml += '<span></span>'
        }
        track.innerHTML = trackHtml;
        // 获取坐标点元素
        tracks = track.querySelectorAll('span');
        tracks[0].setAttribute('class', 'focus');
        play();
      }
      // 切换动画 target=1 下一张 target=-1 上一张
      function move(target) {
        list_items.forEach((item, i) => {
          item.setAttribute('class', listArr[i])
        });
        // 计算index下标值
        index = (index + listArr.length + target) % listArr.length;
        tracks.forEach((item, i) => {
          item.setAttribute('class', '')
        });
        tracks[index].setAttribute('class', 'focus')
      }
      // 下一张
      function next() {
        listArr.unshift(listArr[listArr.length - 1]);
        listArr.pop();
        move(1)
      }
      // 上一张
      function previous() {
        listArr.push(listArr[0]);
        listArr.shift();
        move(-1)
      }
      // 自动轮播
      function play() {
        timer = setInterval(next, 4000);
      }
      // 下一张绑定点击事件
      btn_right.onclick = function () {
        clearInterval(timer);
        next();
        play();
      };
      // 上一张绑定点击事件
      btn_left.onclick = function () {
        clearInterval(timer);
        previous();
        play();
      };
      // track绑定点击事件
      track.addEventListener('click', function (e) {
        var e = e || window.e,
          //标准浏览器用ev.target，IE浏览器用event.srcElement
          target = e.target || e.srcElement,
          n = 0;
        if (target.className !== 'track') {
          clearInterval(timer);
          for (var i = 0, len = tracks.length; i < len; i++) {
            tracks[i].setAttribute('class', '')
            if (tracks[i] === target) {
              n = i;
              tracks[i].setAttribute('class', 'focus');
            }
          }
          // 向右滑动
          if (n - index >= 0) {
            for (var i = 0; i < n - index; i++) {
              setTimeout(next, 160 * i);
            }
          }
          // 向左滑动
          else {
            for (var i = 0; i < index - n; i++) {
              setTimeout(previous, 160 * i);
            }
          }
          play();
        }
      })
      init();
    }
  </script>
</body>

</html>

前言

这里是我按照自己的想法写的一个原生javascript轮播图，给初学者提供一个思路。写轮播图的方法有很多，这里只是其中一种，最重要的还是能学有所得，举一反三。

效果

0.PNG

思路

大部分轮播图都是通过banner左右移动的，这里用的是固定css布局，通过改变class来实现轮播的效果。

注意

本篇文章仅供学习使用，并未做浏览器兼容处理，建议使用谷歌或者第三方最新浏览器，对于IE这个神经病，不用也罢。

说明

这里简要说明一些问题，其实代码里大部分都注释过了。

这里的css样式部分，选择器一定要加上.banner，否则会有权重问题导致无法覆盖上面的css样式。

.banner .first_item{
  z-index: 10;
  transform: translateX(140px) scale(1);
}
.banner .second_item{
  z-index: 1;
  transform: translateX(540px) scale(0.8);
}
.banner .last_item{
  z-index: 1;
  transform: translateX(-250px) scale(0.8);
}

方法一的状态点用的是flex布局做的自适应，也可以使用方法二，但是兼容性貌似还不如方法一，win10自带的浏览器都不支持，索性就用了flex布局。

//方法一
.track{
  display: flex;
  justify-content: center;
  overflow: hidden;
}
//方法二
.track{
   fit-content;
  margin: auto;
  overflow: hidden;
}

这里注意要保留前两个和最后一个div的class名（也就是first_item、second_item、last_item），中间可以自适应随意添加图片，最少三张。有人可能会有疑惑，为什么不自动生成class名？这样就可以随意添加了，答案是：懒得写了，如果自己感兴趣，可以自己去改造。

<div class="first_item">
  <a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
</div>
<div class="second_item">
  <a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
</div>
<div class="">
  <a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
</div>
<div class="">
  <a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
</div>
<div class="last_item">
  <a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
</div>

track绑定点击事件函数使用了事件委托，其中的这种切换方式我觉得是最和谐的，也可以用其他的方法。

//向右滑动
if(n-index >= 0){
  for(var i = 0; i < n-index; i ++){
    setTimeout(next, 160*i);
  }
}
//向左滑动
else{
  for(var i = 0; i < index-n; i ++){
    setTimeout(previous, 160*i);
  }
}
play();
完结～
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lwlblog/p/12346178.html