淘宝轮播图的原生实现

最新推荐文章于 2023-05-31 22:50:19 发布

高shan仰止

最新推荐文章于 2023-05-31 22:50:19 发布

阅读量364

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/Gaoshanyz/article/details/109174180

版权

淘宝轮播图的原生实现

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

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

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

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

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

    .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-color: pink;
    }

    #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-style: 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="pic/001.jpg" alt="" width="500" height="300"></li>
        <li><img src="pic/002.jpg" alt="" width="500" height="300"></li>
        <li><img src="pic/003.jpg" alt="" width="500" height="300"></li>
        <li><img src="pic/004.jpg" alt="" width="500" height="300"></li>
        <li><img src="pic/005.jpg" alt="" 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;
    let leftObj = document.getElementById('left');
    let rightObj = document.getElementById('right');
    let tim = '';

    // 2.创建和图片数量相等的按钮
    let imgLen = lisObj.length;
    for (var i = 0; i < imgLen; i++) {
      let olLi = document.createElement('li');
      olLi.innerHTML = i + 1;
      //默认第一个li选中
      if (i == 0) olLi.className = 'current';
      olLi.onclick = banner;
      //自定义属性，将li对应的下标保存
      olLi.setAttribute('key', i);
      olObj.appendChild(olLi);
    }
    //全局索引
    var imgIndex = 0;
    // 获取图片的宽度
    var imgW = lisObj[0].offsetWidth;
    console.log(imgW);
    // 点击按钮的回调函数
    function banner() {
      imgIndex = this.getAttribute('key');
      // 计算图片位置
      var target = -imgIndex * imgW;
      startMove(ulObj, { left: target }, function () {
        console.log('game over!');
      })
      selOl();
    }
    //鼠标移到box上显示按钮 移走消失
    screenObj.parentElement.onmouseover = function () {
      leftObj.parentElement.style.display = 'block';
      //清除定时器
      clearInterval(tim);
    }
    screenObj.parentElement.onmouseout = function () {
      leftObj.parentElement.style.display = 'none';
      autoPlay();
    }
    /******右边按钮，下一张图*******/
    //克隆第一张图片放到最后
    let cloneImg = lisObj[0].cloneNode(true);
    //放到ul的最后面  设置个红边加以区分 可删
    cloneImg.style.borderTop = 'solid 1px red';
    ulObj.appendChild(cloneImg);

    // 防止用户恶意过快点击
    let isClick = true;
    rightObj.onclick = function () {
      if (!isClick) return;
      isClick = false;
      var change = false;

      // 判断是否为最后一张图
      if (imgIndex == olObj.children.length - 1) {
        //思路：1.从第五张切换到第六张(克隆的)
        // 2.在运动函数的回调函数中，设置ul的left值为0，可迅速切换到第一张
        var target = -olObj.children.length * imgW;
        change = true;
        //重新设置索引从头开始
        imgIndex = 0;
      } else {
        //非最后一张图
        imgIndex++;
        var target = -imgIndex * imgW;
      }
      startMove(ulObj, { left: target }, function () {
        change && (ulObj.style.left = '0px');
        // 当上一张图片运动完成，才能点击下一张
        isClick = true;
      })
      selOl();
    }

    /********左边按钮 上一张图**********/
    leftObj.onclick = function () {
      if (!isClick) return;
      isClick = false;
      if (imgIndex == 0) {
        //克隆的第一张图片显示出来
        //获取所有的图片，包括克隆的
        var totalImgLen = ulObj.children.length;
        ulObj.style.left = -(totalImgLen - 1) * imgW + 'px';
        // 最大索引是长度 - 1，再减去克隆的一张，
        imgIndex = totalImgLen - 2;
      } else {
        imgIndex--;
      }
      var target = -imgIndex * imgW;
      startMove(ulObj, { left: target }, function () {
        isClick = true;
      })
      selOl();
    }

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

    // 让点击的按钮选中
    function selOl() {
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].classList.remove('current');
      }
      //给当前操作的按钮添加这个类
      olObj.children[imgIndex].classList.add('current');
    }
  </script>
</body>

</html>

高shan仰止

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
淘宝轮播图的原生实现

淘宝轮播图的原生实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding
复制链接

扫一扫