js自定义动画函数实现轮播图

最新推荐文章于 2022-07-06 16:13:53 发布

随风奔跑尿飞扬

最新推荐文章于 2022-07-06 16:13:53 发布

阅读量816

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/q1403539144/article/details/91389695

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

缓动动画函数

传入三个参数，分别为：操作元素，操作属性，回调函数

原理：将定时器ID存储在“操作元素”的属性中，每次调用函数先清除此“操作元素”原有的定时器，以解决动画抖动、多个定时器无法清理的问题。操作属性可以有多个，以循环的方式遍历属性，当所有的动画完成后调用回调函数

function animate(ele,json,callback,loopTime) {
    clearInterval(ele.timeId);
    loopTime = loopTime?loopTime:20;
    ele.timeId = setInterval(function () {
        var flag = true;
        for (var arr in json) {
            if (arr === 'zIndex') {
                ele.style[arr] = json[arr];  //z-index属性没有单位，直接设置
            }else if (arr === 'opacity') {
                var current = getStyle(ele,arr)*100; //将数值放大一百倍而不使用原有的小数方式
                var target = json[arr]*100;
                var step= (target - current)/10; 
                step = step<0?Math.floor(step):Math.ceil(step); //因为步移距离有正数和负数，所以需要判断取整方式。（0.2取1，向上取整，-0.2取-1，向下取整）
                current += step;
                ele.style[arr] = current/100;
            }else {
                var current = parseInt(getStyle(ele,arr));
                var target = json[arr];
                var step= (target - current)/10;
                step = step<0?Math.floor(step):Math.ceil(step);
                current += step;
                ele.style[arr] = current+'px';
            }
            if (current !== target){
                flag = false
            }
        }
        if (flag){
            clearInterval(ele.timeId);
            if (callback){
                callback();
            }
        }
        console.log('目标位置：'+target+' 当前位置： '+current+'步移距离：'+step)
    },loopTime)
}

上面得代码不够完美，至于缺点在哪就交给你们啦。下面是经过优化得代码。轮播图用得就是这段代码

function animate(ele,target,step,loopTime) {
    var current = ele.offsetLeft;
    // var target = 400;
    step = step?step:10;
    loopTime = loopTime?loopTime:20;
    //这里传入的ele是一个对象，为对象添加了一个属性存储定时器ID。 因为这种方式底层是以内存地址引用的
    //所以这里的属性会被全局保存下来
    clearInterval(ele.timeToolId);
    ele.timeToolId = setInterval(function () {
        current += target>current?step:-step;

        if ( Math.abs(target - current) > Math.abs(step)){
            ele.style.left = current+'px';
        } else {
            ele.style.left = target+'px';
            clearInterval(ele.timeToolId);
        }
    },loopTime)
}

旋转木马轮播图

思路：首先以定位的方式布局，布局完成后在编写js代码。将每个图片的位置存放到数组中，每次旋转时将数组的最后一位调换到第一位或反之（依据左右滚动而定）,再使用动画函数赋值。最后一张图片与第一章图片相同，这样形成无缝的效果。

素材我就不放了，交给各位自己度娘了

<!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: 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: #DB192A;
    }

    #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>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
  var box = document.getElementById('box');
  var screen = box.children[0];
  var screenWidth = screen.offsetWidth;
  var ulObj = screen.children[0];
  var olObj = screen.children[1];
  var arr = document.getElementById('arr');
  var arrLeft = document.getElementById('left');
  var arrRight = document.getElementById('right');
  var current = 0;
  var timeId = 0;
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  for (var i=0;i<ulObj.children.length-1;i++){
    var liObj = document.createElement("li");
    liObj.innerHTML = i+1;
    liObj.setAttribute('index',i);
    liObj.onmouseover = function() {
        animate(ulObj,-this.getAttribute('index')*screenWidth);
        for (var j=0;j<olObj.children.length;j++) {
          olObj.children[j].className='';
        }
        current = -this.getAttribute('index');
        this.className = 'current';
    };
    olObj.appendChild(liObj);
  }
  olObj.children[0].className = 'current';
  box.onmouseover = function () {
    arr.style.display = 'block';
    clearInterval(timeId);
  };
  box.onmouseout = function () {
    arr.style.display = 'none';
    timeId = setInterval(right,2000);
  };
  arrLeft.onclick = function () {
    if (current !==0 ){
      current++;
      animate(ulObj,current*screenWidth);
      for (var j=0;j<olObj.children.length;j++) {
        olObj.children[j].className='';
      }
      olObj.children[Math.abs(current)].className='current';
    }
  };
  arrRight.onclick = right;
  function right() {
    if (Math.abs(current)===ulObj.children.length-1){
      current =0;
      ulObj.style.left = '0px';
    }
    if (Math.abs(current)<ulObj.children.length-1) {
      current--;
      animate(ulObj,current*screenWidth);
      for (var j=0;j<olObj.children.length;j++) {
        olObj.children[j].className='';
      }
      if (Math.abs(current)===ulObj.children.length-1){
        olObj.children[Math.abs(current)-1].className='';
        olObj.children[0].className='current';
      }else{
        olObj.children[Math.abs(current)].className='current';
      }
    }
  }
  timeId = setInterval(right,2000);

</script>
</body>
</html>

随风奔跑尿飞扬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js自定义动画函数实现轮播图

缓动动画函数传入三个参数，分别为：操作元素，操作属性，回调函数原理：将定时器ID存储在“操作元素”的属性中，每次调用函数先清除此“操作元素”原有的定时器，以解决动画抖动、多个定时器无法清理的问题。操作属性可以有多个，以循环的方式遍历属性，当所有的动画完成后调用回调函数function animate(ele,json,callback,loopTime) { clearInter...
复制链接

扫一扫