案例：旋转木马

页面加载时候出现的效果，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. adb命令总结

  2. 2018-12-21-WPF-弹出-popup-里面的-TextBox-无法输入汉字

    title author date CreateTime categories WPF 弹出 popup 里面的 TextBox 无法输入汉字 lindexi 2018-12-21 18:10:30 ...

  3. Windows API 第19篇 FindFirstVolumeMountPoint FindNextVolumeMountPoint

    相关函数:HANDLE FindFirstVolumeMountPoint(                                                               ...

  4. 编码格式简介（ANSI、GBK、GB2312、UTF-8、UTF-16、GB18030和 UNICODE）

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物,他们把这称为”字节”.再后来,他们又做了一些可以处理这些字节的机器,机器开动了,可以用字节来组合出很多状态 ...

  5. JS中apply和call的联系和区别

    以下内容翻译自stackoverflow 链接: http://stackoverflow.com/questions/7238962/function-apply-not-using-thisarg ...

  6. 【DM8168学习笔记4】ezsdk安装过程记录

    安装文件 ezsdk_dm816x-evm_5_05_02_00_setuplinux DM8168-EZSDK文件结构如图所示.               (图片来自:http://process ...

  7. [code]图像亮度调整enhancement

    //draft 2013.9 //F=X2/u; ////远处细节被淹没. 亮的地方增亮明显,暗的地方更暗. 不可取. // CvScalar rgb; // rgb=cvAvg(src); //fo ...

  8. jvm 分代回收算法通俗理解

    jvm区域总体分两类,heap区和非heap区.heap区又分:Eden Space(伊甸园).Survivor Space(幸存者区).Tenured Gen(老年代-养老区). 非heap区又分: ...

  9. eureka注册中心设置用户名密码

    1.加入安全认证依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  10. Zookeeper教程

    由于zookeeper使用java语言编写,因此我们运行zookeeper需要保证你的服务器上已经安装了jdk. 安装zk 本文介绍的前提是已经默认安装好了jdk,Linux安装JDK教程https: ...