html js 纯js 轮播图-CFANZ编程社区

介绍
样式
代码
介绍

调用的时候
可以使用iframe 嵌入这个东西
有需要设置小宽高
ok
样式

html js 纯js 轮播图_html
代码

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #adv {
      position: relative;
      display: flex;
      align-items: center;
      /*弹性盒子实现垂直居中*/
      margin: 0 auto;
      min-width: 1300px;
      max-width: 1366px;
      height: 400px;
    }

    .arrow {
      position: absolute;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      color: #000;
      text-align: center;
      line-height: 60px;
      font-size: 50px;
      background: #e5e5e5;
      filter: alpha(opacity=70);
      /*ie*/
      opacity: .7;
      border: 0;
      z-index: 2;
      transition: all .5s;
      -moz-transition: all .5s;
      /* Firefox 4 */
      -webkit-transition: all .5s;
      /* Safari 和 Chrome */
      -o-transition: all .5s;
      /* Opera */
    }

    .arrow:hover {
      filter: alpha(opacity=40);
      /*ie*/
      opacity: .4;
    }

    #left {
      left: 0;
    }

    #right {
      right: 0;
    }

    #adv-img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    #adv-img-ul {
      position: absolute;
      left: -100%;
      top: 0;
      width: 1000%;
      transition: all 1s linear;
    }

    #adv-img-ul li {
      float: left;
      width: 10%;
    }

    .num {
      position: absolute;
      height: 50px;
      width: 100%;
      top: 400px;
      text-align: center;
      z-index: 99;
    }

    .num ul {
      display: inline-block;
    }

    #adv-img-num li {
      float: left;
      margin: 0 20px 0 20px;
      color: #e5e5e5;
      cursor: pointer;
    }

    #adv-img-num .on {
      float: left;
      margin: 0 20px 0 20px;
      color: #85ace0;
    }
  </style>
</head>

<body>
  <div id="adv">
    <div id="arr">
      <button class="arrow" id="left">←</button>
      <button class="arrow" id="right">→</button>
    </div>
    <div id="adv-img">
      <ul id="adv-img-ul" style="left:0;">
        <li><img src="images/1.jpg" width="100%"></li>
        <li><img src="images/2.jpg" width="100%"></li>
        <li><img src="images/3.jpg" width="100%"></li>
        <li><img src="images/4.jpg" width="100%"></li>
        <li><img src="images/5.jpg" width="100%"></li>
      </ul>
    </div>
    <div class="num">
      <ul id="adv-img-num">
        <li index="1" class="on">○</li>
        <li index="2">○</li>
        <li index="3">○</li>
        <li index="4">○</li>
        <li index="5">○</li>
      </ul>
    </div>
  </div>
</body>
<script>
  var adv = document.getElementById("adv");
  var imgUl = document.getElementById("adv-img-ul");
  var right = document.getElementById("right");
  var left = document.getElementById("left");
  var button = document.getElementById("adv-img-num").children;
  var index = 1;

  //改变位置
  function animate(offset) {
    var newLeft = parseInt(imgUl.style.left) + offset;
    if (newLeft < -400) {
      // 到了最右
      imgUl.style.left = 0 + '%';
    } else if (newLeft > 0) {
      // 到了最左
      imgUl.style.left = -400 + '%';
    } else {
      imgUl.style.left = newLeft + '%';
    }
  }

  //自动轮播 鼠标悬停暂停
  var timer = null;
  function startImg() {
    if (timer) clearInterval(timer);
    timer = setInterval(function () {
      right.onclick();
    }, 2000);
  }
  adv.onmouseover = function stopImg() {
    clearInterval(timer);
  }
  adv.onmouseout = function startImg() {
    if (timer) clearInterval(timer);
    timer = setInterval(function () {
      right.onclick();
    }, 2000);
  }
  // 我一定要写两个原装开始才会动？？什么毛病？？

  //下面按钮
  function buttonShow() {
    // 清除原有样式
    for (var i = 0; i < button.length; i++) {
      if (button[i].className == 'on') {
        button[i].className = '';
      }
    }
    button[index - 1].className = 'on';

  }
  left.onclick = function () {
    index -= 1;
    if (index < 1) {
      index = 5;
    }
    buttonShow();
    animate(100);
  }
  right.onclick = function () {
    index += 1;
    if (index > 5) {
      index = 1;
    }
    buttonShow();
    animate(-100);
  }
  //点击按钮跳转
  for (var i = 0; i < button.length; i++) {
    // 立即执行函数 不闭包就只执行i=5时候
    (function (i) {
      button[i].onclick = function () {
        var clickIndex = parseInt(this.getAttribute('index'));
        var offset = 100 * (index - clickIndex);
        animate(offset);
        index = clickIndex;
        buttonShow();
      }
    })(i)
  }
</script>
</html>
持续更新