轮播图案例

丐版轮播图

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 基础轮播图 banner 移入移出</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="banner">
    <img id="pic" src="images/p1.jpg" width="500" height="375" alt="pkq">
    <div class="slider">
      <span style="background-color: pink;">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script>
    var oSlider = document.querySelector('.slider')
    var aSpan = document.querySelectorAll('.slider span')
    var oPic = document.querySelector('#pic')
    var oPrev = document.querySelector('.prev')
    var oNext = document.querySelector('.next')

    var index = 0
    var count = 4
    oNext.onclick = function () {
      aSpan[index].style.backgroundColor = 'orange';
      index++
      index = index % count
      oPic.src = `images/p${index + 1}.jpg`
      aSpan[index].style.backgroundColor = '#543';
    }

    oPrev.onclick = function () {
      aSpan[index].style.backgroundColor = 'orange';
      index--
      index = (index +count) % count
      oPic.src = `images/p${index + 1}.jpg`
      aSpan[index].style.backgroundColor = '#543';
    }

    oSlider.onmouseover = function (e) {
      if(e.target.tagName === 'SPAN') {
        aSpan[index].style.backgroundColor = 'orange';
        oPic.src = `images/p${e.target.innerText}.jpg`
        e.target.style.backgroundColor = '#543';
        index = e.target.innerText - 1
      }
    }
  </script>
</body>

</html>

进阶轮播图

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 基础轮播图 banner 移入移出</title>
  <style>
   * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 500px;
      height: 290px;
      margin-top: 100px;
      box-shadow: 0 0 12px #333;
    }

    .pic li {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }

    .pic li.on {
      display: block;
    }

    .pic li img {
      width: 500px;
      height: 290px;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .slider span.active {
      background-color: pink;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>
<body>
  <div class="banner">
    <ul class="pic">
      <li class="on bg333 c368"><img src="images/p1.jpg" alt=""></li>
      <li class="bg333 c368"><img src="images/p2.jpg" alt=""></li>
      <li class="bg333 c368"><img src="images/p3.jpg" alt=""></li>
      <li class="bg333 c368"><img src="images/p4.jpg" alt=""></li>
    </ul>
    <div class="slider">

    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script>
    var oSlider = document.querySelector('.slider')
    var oPic = document.querySelector('.pic')
    var oWrap = document.querySelector('.btn-wrap')

    var switchWrap = {
      'prev': function () {
          switchSlider(function () {
          index--
          index = (index +count) % count
        })
      },
      'next': function () {
        switchSlider(function () {
          index++
          index = index % count
        })
      }
    }
    var index = 0
    var count = oPic.children.length
    
    createSlider()

    oWrap.addEventListener('click', function (e) {
      switchWrap[e.target.className] && switchSlider(switchWrap[e.target.className]())
    }, false)
  
    oSlider.addEventListener('mouseover', function (e) {
      if(e.target.tagName === 'SPAN') {
        switchSlider(function () {
            index = e.target.innerText - 1
        })
      }
    }, false)

    function switchSlider (callback) {
      oPic.children[index].classList.remove('on')
      oSlider.children[index].classList.remove('active')
      callback && callback() 
      oPic.children[index].classList.add('on')
      oSlider.children[index].classList.add('active')
    }

    function createSlider () {
      var fragment = document.createDocumentFragment();
      for(var i = 0; i < count; i++) {
        var vDom = document.createElement('span')
        vDom.innerText = i + 1
        fragment.appendChild(vDom)
      }
      fragment.children[0].classList.add('on')
      oSlider.appendChild(fragment)
    }
  </script>
</body>

</html>

动画轮播自动播放

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 轮播图 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      overflow: hidden;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .pic-list {
      width: 100%;
    }

    .pic-list li {
      float: left;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    .slider .active {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="banner">
    <ul class="pic-list">
      <li><img src="images/1.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/2.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/3.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/4.jpg" alt="" width="500" height="200"></li>
    </ul>
    <div class="slider">
    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>

    var oBanner = $('.banner');
    var oUl = $('.pic-list');
    var aPic = $$('.pic-list li');
    var oBtnWrap = $('.btn-wrap');
    var oSlider = $('.slider');
    var aSlider = oSlider.children;
    var picW = aPic[0].offsetWidth;
    var picLen = aPic.length;
    var index = 0;
    var timer;

    var tapMap = {
      'prev': function (e) {
        move(function () {
          index--;
          index = (picLen + index) % picLen;
        })
      },
      'next': function (e) {
        move(function () {
          index++;
          index = index % picLen;
        })
      }
    }

    init();
    autoTranslate();

    function init() {
      var spanStr = '';
      var firstClass = '';
      oUl.style.width = `${picLen * 100}%`;
      for (var i = 0; i < picLen; i++) {
        firstClass = ''
        if (i === 0) {
          firstClass = 'class="active"';
        }
        spanStr += `<span ${firstClass}>${i + 1}</span>`;
      }
      oSlider.innerHTML = spanStr;
    }

    oBanner.addEventListener('mouseover', function () {
      clearInterval(timer);
    }, false);

    oBanner.addEventListener('mouseout', function () {
      autoTranslate();
    }, false)

    oBtnWrap.addEventListener('click', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var btn = e.target;
        if (tapMap[btn.className] && typeof tapMap[btn.className] === 'function') {
          tapMap[btn.className](e);
        }
      }
    }, false);

    oSlider.addEventListener('mouseover', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var sliderBtn = e.target;
        move(function () {
          index = getElementIdx(sliderBtn);
        })
      }
    }, false);


    function move(callback) {
      aSlider[index].classList.remove('active');
      callback && callback(); 
      aSlider[index].classList.add('active');
      animate(oUl, {
        marginLeft: -index * picW + 'px'
      })
    }

    //自动切换 轮播 index++;
    function autoTranslate() {
      clearInterval(timer);
      timer = setInterval(function () {
        move(function () {
          index++;
          index = index % picLen;
        });
      }, 1000)
    }
  </script>
</body>

</html>

无缝轮播

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 轮播图 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      overflow: hidden;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .pic-list {
      width: 100%;
    }

    .pic-list li {
      float: left;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    .slider .active {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="banner">
    <ul class="pic-list">
      <li><img src="images/1.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/2.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/3.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/4.jpg" alt="" width="500" height="200"></li>
    </ul>
    <div class="slider">

    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>

    var oBanner = $('.banner');
    var oUl = $('.pic-list');
    var aPic = $$('.pic-list li');
    var oBtnWrap = $('.btn-wrap');
    var oSlider = $('.slider');
    var aSlider = oSlider.children;
    var picW = aPic[0].offsetWidth;
    var picLen = aPic.length + 1;
    var index = 0;
    var timer;
    init();
    var tapMap = {
      'prev': function (e) {
        move(function () {
          if (index === 0) {
            index = aPic.length - 1;
            oUl.style.marginLeft = -index * picW + 'px';
          }
          index--;
          index = (picLen + index) % picLen;
        });
      },
      'next': function (e) {
        move(function () {
          if (index === aPic.length - 1) {
            console.log('我要瞬间调到0 然后慢慢走到1');
            index = 0;
            oUl.style.marginLeft = -index * picW + 'px';
          }
          index++; //4
          index = index % picLen; // len 5 4%4
        });
      }
    }

    function init() {
      var spanStr = '';
      var firstClass = '';
      oUl.style.width = `${picLen * 100}%`;
      for (var i = 0; i < picLen - 1; i++) {
        firstClass = ''
        if (i === 0) {
          firstClass = 'class="active"';
        }
        spanStr += `<span ${firstClass}>${i + 1}</span>`;
      }
      oSlider.innerHTML = spanStr;
      oUl.appendChild(aPic[0].cloneNode(true));
      aPic = $$('.pic-list li');
      autoTranslate();
    }

    oBanner.addEventListener('mouseover', function () {
      clearInterval(timer);
    }, false);

    oBanner.addEventListener('mouseout', function () {
      autoTranslate();
    }, false);

    oBtnWrap.addEventListener('click', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var btn = e.target;
        if (tapMap[btn.className] && typeof tapMap[btn.className] === 'function') {
          tapMap[btn.className](e);
        }
      }
    }, false);

    oSlider.addEventListener('mouseover', function (e) {
      e = e || window.event;
      if (e.target.tagName.toLowerCase() === 'span') {
        var sliderBtn = e.target;
        move(function () {
          index = getElementIdx(sliderBtn);
        })
      }
    }, false);

    function move(callback) {
      aSlider[index % (aPic.length - 1)].classList.remove('active');
      callback && callback(); //插入执行 index修改代码
      //如果index 为4 我们让index 变为0  4%4 3%4 2%4
      aSlider[index % (aPic.length - 1)].classList.add('active');
      animate(oUl, {
        marginLeft: -index * picW + 'px'
      })
    }
    
    //自动切换 轮播 index++;
    function autoTranslate() {
      clearInterval(timer);
      timer = setInterval(function () {
        tapMap['next']();
      }, 1000)
    }
  </script>
</body>

</html>