旋转木马特效实现原理及过程

比眉伴天荒 2022-06-18 10:25 246阅读 0赞

<!DOCTYPE html>  
<html>  
<head lang="en">  
  <meta charset="UTF-8">  
  <title>旋转木马轮播图</title>  
  <link rel="stylesheet" href="css/css.css"/>  
  <script type="text/javascript" src="js/animate.js"></script>  
    
</head>  
<body>  
<div class="wrap" id="wrap">  
  <div class="slide" id="slide">  
    <ul>  
      <li><a href="\#"><img src="images/slidepic1.jpg" alt=""/></a></li>  
      <li><a href="\#"><img src="images/slidepic2.jpg" alt=""/></a></li>  
      <li><a href="\#"><img src="images/slidepic3.jpg" alt=""/></a></li>  
      <li><a href="\#"><img src="images/slidepic4.jpg" alt=""/></a></li>  
      <li><a href="\#"><img src="images/slidepic5.jpg" alt=""/></a></li>  
    </ul>  
    <div class="arrow" id="arrow">  
      <a href="javascript:;" class="prev" id="arrLeft"></a>  
      <a href="javascript:;" class="next" id="arrRight"></a>  
    </div>  
  </div>  
</div>  
  
  
<script src="../animate.js"></script>  
<script>  
  var config = \[  
    \{  
      width: 400,  
      top: 20,  
      left: 50,  
      opacity: 0.2,  
      zIndex: 2  
    \},//0  
    \{  
      width: 600,  
      top: 70,  
      left: 0,  
      opacity: 0.8,  
      zIndex: 3  
    \},//1  
    \{  
      width: 800,  
      top: 100,  
      left: 200,  
      opacity: 1,  
      zIndex: 4  
    \},//2  
    \{  
      width: 600,  
      top: 70,  
      left: 600,  
      opacity: 0.8,  
      zIndex: 3  
    \},//3  
    \{  
      width: 400,  
      top: 20,  
      left: 750,  
      opacity: 0.2,  
      zIndex: 2  
    \}//4  
  \];//其实就是一个配置单 规定了每张图片的大小位置层级透明度  
    
  var slide = document.getElementById("slide");  
  
  
  var ul = slide.children\[0\];  
  
  
  var lis = ul.children;  
  
  
  var arrow = document.getElementById("arrow");  
  
  
  var arrRight = arrow.children\[1\];  
  
  
  var arrLeft = arrow.children\[0\];  
  
  
  var wrap = document.getElementById("wrap");  
    
  //移入移出盒子显示arrow  
  wrap.onmouseover = function () \{  
  
  
    animate(arrow, \{"opacity": 1\});  
  
  
  \};  
    
  wrap.onmouseout = function () \{  
  
  
    animate(arrow, \{"opacity": 0\});  
  \};  
    
  change();  
    
  //通过变量去控制当前点击是否可以执行  
  
  
  var flag = true;  
    
  //点击右按钮  
  arrRight.onclick = function () \{  
  
  
    if (flag) \{  
  
  
      //点击以后首先设置不能再点了  
  
  
      flag = false;  
  
  
      //从config前面删除一个元素  
  
  
      var temp = config.shift();  
  
  
      //将删除的第一项放到最后  
  
  
      config.push(temp);  
  
  
      //配置单改变，我们需要让所有的li走到新的位置上  
  
  
      change();  
    \}  
  \};  
    
  //点击左侧  
  arrLeft.onclick = function () \{  
  
  
    if (flag) \{  
  
  
      flag = false;  
  
  
      var temp = config.pop();  
  
  
      config.unshift(temp);  
  
  
      //根据新的配置单让图片归位  
  
  
      change();  
    \}  
  \};  
    
    
  //这个函数是让每一个li运动到config中对应的位置  
  
  
  function change() \{  
  
  
    //让每一个li运动到指定位置  
  
  
    for (var i = 0; i < lis.length; i++) \{  
  
  
      //运动到哪  
  
  
      animate(lis\[i\], config\[i\], function () \{  
  
  
        //是在运动完毕后触发  
        flag = true;  
      \});  
    \}  
  \}  
  
  
  
  
//  运动函数  
  
  
  function animate(tag,obj,Fn)\{  
  
  
    clearInterval(tag.timer);  
    tag.timer = setInterval(function()\{  
      var flag = true;  
      for(var key in obj)\{  
  
  
        if(key == 'zIndex')\{  
          tag.style\[key\] = obj\[key\];  
        \}else if(key == 'opacity')\{  
  
  
          var attr = key;  
          var target = obj\[key\] \* 10;  
          var leader = getStyle(tag,attr)\*10  || 0;  
          var step = (target - leader) / 10;  
          step = step > 0 ? Math.ceil(step) : Math.floor(step);  
          leader = leader + step;  
          tag.style\[attr\] = leader / 10;  
        \}else\{  
  
  
          var attr = key;  
          var target = obj\[key\];  
          var leader = parseInt(getStyle(tag,attr))  || 0;  
          var step = (target - leader) / 10;  
          step = step > 0 ? Math.ceil(step) : Math.floor(step);  
          leader = leader + step;  
          tag.style\[attr\] = leader + 'px';  
        \}  
  
  
  
  
        if(leader != target)\{  
          flag = false;  
        \}  
      \}  
      if(flag)\{  
        clearInterval(tag.timer);  
        Fn && Fn();  
      \}  
  
  
    \},20);  
  
  
</script>  
</body>  
</html>