欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS---案例:旋转木马

程序员文章站 2022-05-29 08:07:05
案例:旋转木马 页面加载时候出现的效果,script标签写在head里面,body上面 显示一个图片散开的动画,遍历之后,把每个图片用封装的动画函数移动到指定目标(同时改变多属性:宽,透明度,层级,top, left) 在做左右按钮点击事件。 右边按钮,用数组里面的push和shift,数组第一个去 ......

案例:旋转木马

 

页面加载时候出现的效果,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>