案例：旋转木马

页面加载时候出现的效果，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="data:images/slidepic1.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/slidepic2.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/slidepic3.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data:images/slidepic4.jpg" alt="" /></a></li>

        <li><a href="#"><img src="data: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---案例：旋转木马的更多相关文章

  1. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  2. 第一个Vue.js案例

    第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...

  3. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  4. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  5. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

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

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  7. Knockout.Js案例二Working With Lists And Collections

    案例一:Foreach绑定 通常,您要生成重复的UI元素,特别是当显示列表,用户可以添加和删除元素.KO.JS让你轻松,使用的数组和foreach绑定. 在接下来的几分钟,您将构建一个动态UI保留席位 ...

  8. Knockout.Js案例一Introduction

    </strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...

  9. JS案例之7——瀑布流布局(2)

    这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效.这个例子不需要在wind ...

  10. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. 安装vmware和装虚拟机

    今日任务 .Linux发行版的选择 .vmware创建一个虚拟机(centos) .安装配置centos7 .xshell配置连接虚拟机(centos) 选择性 pc可以选择 -纯系统 Linux/w ...

  2. quatz调度-手动终止线程(2) Cleaner线程做清理工作

    import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import ja ...

  3. 网络结构解读之inception系列一：Network in Network

    网络结构解读之inception系列一:Network in Network   网上有很多的网络结构解读,之前也是看他人博客的介绍,但当自己看论文的时候,发现存在很多的细节和动机解读,而这部分能加深 ...

  4. gethostname gethostbyname gethostbyaddr 获得主机相关信息

    网络编程里经常需要获得主机的相关信息,下面围绕相关的函数以及用到的结构来说明. 获得主机名:int gethostname( char FAR *name, //[out] Pointer to a ...

  5. 跟我一起学习webpack输出动态HTML(三)

    跟着之前的项目来 我们没打包一次就会生成一个bundile.js,我们要更新最新的代码不希望有缓存,那么这个时候我们就是更改资源的URL, 每当代码发生变化时,相应的hash也会发生变化.这个时候我们 ...

  6. 在xml中对one2many 字段屏蔽 添加项目

    在xml中对one2many 字段(mrp_workorder_variation_line_ids) 设置 只有在草稿状态下才能编辑 <field name="mrp_workord ...

  7. day48作业

    使用Bootstrap框架编写一个简单的web静态页面 效果图: <!DOCTYPE html> <html lang="en"> <head> ...

  8. main函数执行前后还会发生什么

    问题分析 首先main()函数只不过是提供了一个函数入口,在main()函数中的显示代码执行之前,会由编译器生成_main函数,其中会进行所有全局对象的构造以及初始化工作.简单来说对静态变量.全局变量 ...

  9. Linux下IP修改后重启服务器 oralce 出错(监听无法启动)

    针对linux下修改IP导致的Oracle不能启动问题的解决 主要修改/etc/hosts配置文件.修改前配置: # Do not remove the following line, or vari ...

  10. shell 启动脚本

    启动脚本是bash启动时自动执行的脚本.用户可以把一些环境变量的设置和alias.umask设置放在启动脚本中,这样每次启动Shell时这些设置都自动生效.思考一下,bash在执行启动脚本时是以for ...