文章
文章文档

JavaScript原生普通自动轮播图之函数封装

释放双眼，带上耳机，听听看~！
<!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: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

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

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

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

    .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;
    }

    #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">
      <ul>
        <li><img src="images/1.jpg" width="500" height="200" /></li>
        <li><img src="images/2.jpg" width="500" height="200" /></li>
        <li><img src="images/3.jpg" width="500" height="200" /></li>
        <li><img src="images/4.jpg" width="500" height="200" /></li>
        <li><img src="images/5.jpg" width="500" height="200" /></li>
        <li><img src="images/5.jpg" width="500" height="200" /></li>
      </ul>
      <ol>
        <!-- 动态创建的小方块，添加在这里，样式已经给写好了-->
      </ol>
    </div>
    <div id="arr">
      <span id="left">&lt;</span>
      <span id="right">&gt;</span>
    </div>
  </div>

  <script>
    //思路
    //1.获取对应的元素
    //  获取移动的单位宽
    //2.根据轮播图片的个数,来动态的生成右下角的小方块们. 
    //  右下角的小方块其实就是ol中的li标签
    //  ol中的第一个li标签要有颜色(添加一个current类)
    //3.简单轮播
    //  遍历ol中的每一个li标签
    //  给每一个li标签添加索引
    //  给每一个li标签设置单击事件. 
    //      颜色排他
    //      获取当前点击的小方块的索引
    //      计算要移动的目标位置
    //      调用animate来做动画
    //      注意: ******
    //4.左右焦点轮播
    //  显示隐藏左右焦点
    //  右边焦点设置点击事件. 
    //      移动出去的图片张数++
    //      计算移动的目标位置
    //      调用animate来移动
    //      右下角小方块的颜色要对应上
    //      无限无缝轮播
    //  左边焦点设置点击事件.


    //1.获取对应的元素. 
    let box = document.getElementById('box'); //大盒子
    let screenBox = document.querySelector('.screen');
    let unitWidth = screenBox.offsetWidth; //移动的单位宽
    let ul1 = screenBox.children[0]; //要动画移动的ul标签. 
    let lisUL = ul1.children; //ul中的所有li标签
    let ol1 = screenBox.children[1]; //ol标签,装右下角所有的小方块的. 
    let arrDiv = document.getElementById('arr'); //左右焦点盒子
    let leftSpan = document.getElementById('left'); //左焦点
    let rightSpan = document.getElementById('right'); //右焦点

    //2.根据轮播图图片的个数,来生成右下角的小方块. 
    for (let i = 0; i < lisUL.length; i++) {
      //创建li标签
      let liNew = document.createElement('li');
      //给li标签设置内容
      liNew.innerText = i + 1;
      //把生成的li添加到ol中
      ol1.appendChild(liNew);
    }
    // 默认ol中的第一个li标签有一个current类. 
    let lisOl = ol1.children; //ol中的所有li标签,也就是右下角的所有小方块. 
    lisOl[0].setAttribute('class', 'current');


    //3.简单轮播
    // 遍历右下角的每一个小方块(ol中的li标签们)
    for (let i = 0; i < lisOl.length; i++) {
      //给每一个小方块li添加索引
      lisOl[i].setAttribute('index', i);
      //给每一个小方块li注册点击事件. 
      lisOl[i].onclick = function () {
        //颜色排他. 
        for (let j = 0; j < lisOl.length; j++) {
          lisOl[j].removeAttribute('class');
        }
        this.setAttribute('class', 'current');
        //获取当前点击的小方块的索引
        let idx = this.getAttribute('index');
        //计算要运动的目标位置
        let target = -idx * unitWidth;
        //调用animate来做动画
        animate(ul1, target);
        //注意: *******索引要统一
        picIndex = liIndex = idx;
      }
    }

    //4.左右焦点轮播. 
    //4.0 声明一个变量,用来记录图片滚出去的个数. 
    let picIndex = 0;
    //4.0 给ul中再添加一张轮播图片(其实添加的这一张就是第一张一模一样的.)
    ul1.appendChild(lisUL[0].cloneNode(true));
    //4.0 声明一个变量,用来记录右下角的小方块滚出去的个数. 
    let liIndex = 0;

    //4.1 显示隐藏左右焦点. 
    box.onmouseover = function () {
      arrDiv.style.display = 'block';
      //停止自动轮播
      clearInterval(timerId);
    }
    box.onmouseout = function () {
      arrDiv.style.display = 'none';
      //重新自动轮播
      timerId = setInterval(nextPic, 2000);
    }

    //4.2  右边焦点设置点击事件. 
    rightSpan.onclick = function () {
      nextPic();
    }

    //把右边焦点点击事件代码封装成一个函数
    function nextPic() {
      //无限无缝轮播. 
      //如果当前索引是5,显示的就是克隆的哪一张(普通用户看到的是第一张)
      //我们就应该马上把索引改成0,位置马上改成真正的第一张. 
      if (picIndex == lisUL.length - 1) {
        picIndex = 0;
        ul1.style.left = '0px';
      }
      // console.log(lisUL.length);
      //移动出去的图片张数++
      picIndex++;
      //计算目标位置
      let target = -picIndex * unitWidth;
      //调用animate函数来做动画
      animate(ul1, target);

      //右下角小方块们的颜色要对应上.
      liIndex++;
      if (liIndex == lisUL.length - 1) {
        liIndex = 0;
      }
      console.log(liIndex);
      for (let i = 0; i < lisOl.length; i++) {
        lisOl[i].removeAttribute('class');
      }
      lisOl[liIndex].setAttribute('class', 'current');
    }


    //4.3  左边焦点设置点击事件. 
    leftSpan.onclick = function () {
      //无限无缝轮播. 
      //如果当前索引是5,显示的就是克隆的哪一张(普通用户看到的是第一张)
      //我们就应该马上把索引改成0,位置马上改成真正的第一张. 
      if (picIndex == 0) {
        picIndex = lisUL.length - 1;
        ul1.style.left = -(lisUL.length - 1) * unitWidth + 'px';
      }

      //移动出去的图片张数--
      picIndex--;
      //计算目标位置
      let target = -picIndex * unitWidth;
      //调用animate函数来做动画
      animate(ul1, target);

      //右下角小方块们的颜色要对应上.
      liIndex--;
      if (liIndex < 0) {
        liIndex = lisUL.length - 2; // 索引比图片少 1 再加上克隆的一张图片 所以 需要减去 2
      }
      console.log(liIndex);
      for (let i = 0; i < lisOl.length; i++) {
        lisOl[i].removeAttribute('class');
      }
      lisOl[liIndex].setAttribute('class', 'current');
    }


    //5.自动轮播
    //设置计时器,间隔时间去调用nextPic
    let timerId = setInterval(nextPic, 2000);


  </script>
<script>


// 1、 匀速轮播
// 封装一个animate函数
// 01 - 运动的目标位置不写死.
// 02 - 做运动的元素不写死
// 03 - 运动的方向不写死
// function animate(ele, target) {
//   //设置新计时器之前要清空老的计时器
//   clearInterval(ele.timerId);
//   //设置计时器
//   ele.timerId = setInterval(function () {
//     //获取元素当前的定位的left值
//     let currentLeft = ele.offsetLeft;
//     //设置步长
//     let step = target > currentLeft ? 30 : -30;
//     //计算运动后的位置.
//     currentLeft += step;
//     // console.log(currentLeft);
//     //判断赋值
//     if (Math.abs(target - currentLeft) > Math.abs(step)) {
//       ele.style.left = currentLeft + "px";
//     } else {
//       ele.style.left = target + "px";
//       clearInterval(ele.timerId);
//     }
//   }, 50);
// }

// 2、缓动轮播
//封装一个animateSlow函数
//01-运动的目标位置不写死.
//02-做运动的元素不写死
//03-运动的方向不写死
function animate(ele, target) {
  //设置新计时器之前要清空老的计时器
  clearInterval(ele.timerId);
  //设置计时器
  ele.timerId = setInterval(function () {
    //获取元素当前的定位的left值
    let currentLeft = ele.offsetLeft;
    //设置步长
    let step = (target - currentLeft) / 5;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    //计算运动后的位置.
    currentLeft += step;
    // console.log(currentLeft);
    //判断赋值
    if (Math.abs(target - currentLeft) > Math.abs(step)) {
      ele.style.left = currentLeft + "px";
    } else {
      ele.style.left = target + "px";
      clearInterval(ele.timerId);
    }
  }, 50);
}


</script>
</body>

</html>
内容投诉
JavaScript

JavaScript缓动动画的封装-添加多属性

2020-7-17 11:47:01

JavaScript

Js中伪数组转真数组的五种方法

2020-7-27 17:45:38

❯
搜索

  • 扫码打开当前页

  • 小程序

返回顶部