JS---案例:旋转木马

Posted jane_panyiyun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS---案例:旋转木马相关的知识,希望对你有一定的参考价值。

案例:旋转木马

 

页面加载时候出现的效果,script标签写在head里面,body上面

显示一个图片散开的动画,遍历之后,把每个图片用封装的动画函数移动到指定目标(同时改变多属性:宽,透明度,层级,top, left)

在做左右按钮点击事件。

右边按钮,用数组里面的push和shift,数组第一个去除加到最后一个位置

左边按钮,unshift最后一个pop到第一个

在很快点击的时候,会有混乱的情况(一个函数没执行完毕下一个执行全挤在一起)所以加了一个锁flag,保证一个函数执行完毕才进行下一个函数

分别添加进图片散开,左边按钮,右边按钮3个事件里面。

 

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css(1).css" />
  <script src="common.js"></script>
  <script>
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }
    ];


    //页面加载的事件
    window.onload = function () {
      var flag = true; //假设所有的动画执行完毕了---锁=====================================
      var list = my$("slide").getElementsByTagName("li");

      //图片散开
      function assign() {
        for (var i = 0; i < list.length; i++) {
          //设置每个li,用封装的animate函数,把宽,层级,透明度,left,top移动到制定的目标位置
          animate(list[i], config[i], function () {
            flag = true; //==============================================================
          })
        }
      };
      assign();

      //右边按钮
      my$("arrRight").onclick = function () {
        if (flag) { //=====================================================================
          flag = false;
          config.push(config.shift());
          assign();// 重新分配
        }
      };

      //左边按钮
      my$("arrLeft").onclick = function () {
        if (flag) {
          flag = false;
          config.unshift(config.pop());
          assign();
        }
      };

      //鼠标进入,左右焦点的div显示
      my$("slide").onmouseover = function () {
        animate(my$("arrow"), { "opacity": 1 });
      };

      //鼠标离开,左右焦点的div隐藏
      my$("slide").onmouseout = function () {
        animate(my$("arrow"), { "opacity": 0 });
      };
    };

  </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>

</body>

</html>

以上是关于JS---案例:旋转木马的主要内容,如果未能解决你的问题,请参考以下文章

在Android中的旋转木马

JS旋转木马图片轮播

Javascript学习记录——原生JS实现旋转木马特效

JS原生示例 案例 学习

原生JS-旋转木马

Materialisecss.com旋转木马只需要js