案例：旋转木马

页面加载时候出现的效果，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. 2018-10-31-C#-7.0-使用下划线忽略使用的变量

    title author date CreateTime categories C# 7.0 使用下划线忽略使用的变量 lindexi 2018-10-31 14:4:9 +0800 2018-10- ...

  2. 01.Hibernate快速入门

    第一步:下载Hibernate5的运行环境 https://sourceforge.net/projects/hibernate/files/hibernate-orm/ 第二步:在数据库创建表 Cr ...

  3. 全面解析Spring中@ModelAttribute注解的用法

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:全面解析Spring中@ModelAttribute注解的用法: @ModelAttribute注解用于将方法的参数或方法的返回值绑定到 ...

  4. iotop实时监控磁盘io

    介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...

  5. C语言中结构体的深拷贝和浅拷贝

    C++ 的浅拷贝和深拷贝(结构体) 拷贝有两种:深拷贝,浅拷贝 浅拷贝:拷贝过程中是按字节复制的,对于指针型成员变量只复制指针本身,而不复制指针所指向的目标 (1)结构体中不存在指针成员变量时 typ ...

  6. JEECMS 系统权限设计

    1.用户校验. 登录校验主要围绕着用户后台登陆的url拦截 a.围绕着用户登录过程中设计到两张用户表 jc_user:存储着用户的基本信息 jo_user:存储着用户登录.注册.更新时间及用户密码信息 ...

  7. PAT甲级——A1024 Palindromic Number

    A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...

  8. Scrapy的Request和Response对象

    一.Request 发送一个请求,参数如下: url :request对象发送请求的url callback :在下载器下载完相应的数据后执行的回调函数 method :请求方法,默认为get hea ...

  9. vue 二维码长按保存和复制内容

    效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 ...

  10. 阿里云CDN上线 WAF，一站式提供分发+安全能力

    CDN是业界公认的加速网站访问效率.提升用户体验的内容分发加速产品.Gartner预测2019年超过50%的互联网流量将通过CDN内容分发网络进行加速. 然而,越来越多企业也意识到恶意网络攻击对非凡用 ...