案例：旋转木马

页面加载时候出现的效果，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. java单元测试小结

    1. mock 构造函数 import static org.junit.Assert.*; import java.util.ArrayList; import org.junit.Test; im ...

  2. wpf关闭窗口弹出是否确认关闭的提示

    if (MessageBox.Show("是否退出系统?", "退出系统?", MessageBoxButton.OKCancel, MessageBoxIma ...

  3. 解决Navicat 报错:1130-host is not allowed MySQL不允许从远程访问的方法

    ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL server 解决方法: 1. 改表法.可能是你的帐号不允许 ...

  4. MFC ,List使用

    出自http://www.cnblogs.com/yuehui/archive/2012/06/15/2550449.html List容器双向线性表list容器   list类定义了双向的线性表.V ...

  5. Linux常用知识

    1.Redhat 系统按如下系统启动:加载内核执行init程序/etc/rc.d/rc.sysinit #由init执行的第一个脚本/etc/rc.d/rc${RUNLEVEL}d/* #$RUNLE ...

  6. 详解 equals() 方法和 hashCode() 方法

    创建实体类时,最好重写超类(Object)的hashCode()和equals()方法 equals()方法: 通过该实现可以看出,Object类的实现采用了区分度最高的算法,即只要两个对象不是同一个 ...

  7. 附录C 准备NCDC气象数据(加解释)

    附录C 准备NCDC气象数据 这里首先简要介绍如何准备原始气象数据文件,以便我们能用Hadoop对它们进行分析.如果打算得到一份数据副本供Hadoop处理,可按照本书配套网站(网址为http://ww ...

  8. CentOS 6.5 源码编译搭建LAMP(两台独立主机实现)

    搭建前准备: 1.两台独立主机 httpd:192.168.1.105 php-fpm:192.168.1.105 mariadb:192.168.1.103 2.相关软件的源码包 httpd:htt ...

  9. lc6 ZigZag Conversion

    lc6 ZigZag Conversion 分成两步, 第一步垂直向下, 1 1 1 1 第二步倾斜向上 1 1 1 1 1 1 1 用nRows个StringBuilder 然后将他们合并即可 cl ...

  10. jQuery3动画+创建元素

    一.jQuery的动画 1.jQuery自带的动画 1>变化的是width height opacity display <!DOCTYPE html> <html lang= ...