原生js写的轮播图

最新推荐文章于 2024-10-16 16:26:58 发布
chengaoqiu
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量84
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/chengaoqiu/article/details/114540759
版权
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 300px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .screen {
      width: 500px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }

    .screen li {
      width: 500px;
      height: 300px;
      overflow: hidden;
      float: left;
    }

    .screen ul {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 3000px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: yellow;
    }

    #arr {
      display: none;
      z-index: 1000;

    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>

<body>
  <div class="all" id='box'>
    <div class="screen" id="screen">
      <ul>
        <li>
          <img src="images1/1.jpg" width="500" height="300" />
        </li>
        <li>
          <img src="images1/2.jpg" width="500" height="300" />
        </li>
        <li>
          <img src="images1/3.jpg" width="500" height="300" />
        </li>
        <li>
          <img src="images1/4.jpg" width="500" height="300" />
        </li>
        <li>
          <img src="images1/5.jpg" width="500" height="300" />
        </li>
      </ul>
      <ol>

      </ol>
    </div>
    <div id="arr">
      <span id="left">&lt;</span>
      <span id="right">&gt;</span>
    </div>
  </div>

  <script src="./move.js"></script>
  <script>
    //1 获取所有的节点
    let screenObj = document.getElementById('screen');
    let ulObj = screenObj.firstElementChild;
    let lisObj = ulObj.children;
    let olObj = screenObj.lastElementChild;
    // 获取当前screen的宽度
    let screenW = screenObj.offsetWidth;
    let leftObj = document.getElementById('left');
    let rightObj = document.getElementById('right')
    let arrObj = document.getElementById('arr');
    let boxObj = document.getElementById('box')
    // 索引值的全局变量
    let index = 0;
    let timess = '';
    // 2添加序列号到ol中
    for (var i = 0; i < lisObj.length; i++) {
      let olLi = document.createElement('li');
      olLi.innerHTML = i + 1;
      console.log(olLi);
      // 默认第一张选中
      i == 0 && (olLi.className = 'current');
      // 给每个li设置自定义属性
      olLi.setAttribute('key', i);//setAttribute(属性,属性值)
      // 给ol中的li绑定点击事件
      olLi.onclick = olLiClickFn;
      olObj.appendChild(olLi)
    }

    // 3 点击序号,切换到对应图片
    function olLiClickFn() {
      // console.log(this);
      // 3-1 取出序列号
      let key = this.getAttribute('key');
      index = key;
      //console.log(key);
      let target = screenW * key;
      //console.log(target);
      // 3-2 运动函数,将left运动到目标值
      startMove(ulObj, { left: -target });
      selOl()
    }
    // 获取ol中li
    let olLisObj = olObj.children;


    // 鼠标移入显示左右按钮,移出消失
    boxObj.onmouseover = function () {
      arrObj.style.display = 'block';
      clearInterval(timess)

    }
    boxObj.onmouseout = function () {
      arrObj.style.display = 'none';
      autoPlay();
    }
    // 克隆第一张图片追加到最后
    let newImg = lisObj[0].cloneNode(true);//cloneNode(true)
    newImg.style.borderTop = '1px solid red';
    //console.log(newImg);
    ulObj.appendChild(newImg)

    // 给右边按钮绑定点击事件
    rightObj.onclick = function () {
      index++;
      // 判断当前index是最大索引,则从第五张切换到克隆的第一张
      // 再将left设置为0
      if (index == olLisObj.length) {
        // 计算target值
        let target = index * screenW;
        startMove(ulObj, { left: -target }, function () {
          ulObj.style.left = 0;
        });
        // 设置索引为0
        index = 0;
      } else {
        // 计算目标值
        let target = index * screenW;
        console.log(index);
        startMove(ulObj, { left: -target });
      }

      selOl();

    }

    // 左边按钮的实现
    leftObj.onclick = function () {
      index--;
      if (index == -1) {
        //设置left值为-2500px,将克隆的图片显示出来
        ulObj.style.left = -olLisObj.length * screenW + 'px';
        // 从克隆的图片切换到第五张
        index = olLisObj.length - 1;
        let target = index * screenW;
        startMove(ulObj, { left: -target });

      } else {
        let target = index * screenW;
        startMove(ulObj, { left: -target });
      }


      selOl();
    }

    // 自动轮播的实现
    autoPlay();
    function autoPlay() {
      timess = setInterval(rightObj.onclick, 2000)
    }



    // 按钮选中的函数
    function selOl() {
      // console.log(index);
      // 取消以前选中的,设置当前的图片
      let crurent = document.querySelector('.current');
      crurent.className = '';
      // console.log(olLisObj);
      olLisObj[index].className = 'current';
    }

  </script>
</body>

</html>