案例：旋转木马

页面加载时候出现的效果，script标签写在head里面，body上面

显示一个图片散开的动画，遍历之后，把每个图片用封装的动画函数移动到指定目标（同时改变多属性：宽，透明度，层级，top, left）

在做左右按钮点击事件。

右边按钮，用数组里面的push和shift，数组第一个去除加到最后一个位置

左边按钮，unshift最后一个pop到第一个

在很快点击的时候，会有混乱的情况（一个函数没执行完毕下一个执行全挤在一起）所以加了一个锁flag，保证一个函数执行完毕才进行下一个函数

分别添加进图片散开，左边按钮，右边按钮3个事件里面。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title>旋转木马轮播图</title>
  7.   <link rel="stylesheet" href="css/css(1).css" />
  8.   <script src="common.js"></script>
  9.   <script>
  10.     var config = [
  11.       {
  12.         width: 400,
  13.         top: 20,
  14.         left: 50,
  15.         opacity: 0.2,
  16.         zIndex: 2
  17.       },
  18.       {
  19.         width: 600,
  20.         top: 70,
  21.         left: 0,
  22.         opacity: 0.8,
  23.         zIndex: 3
  24.       },
  25.       {
  26.         width: 800,
  27.         top: 100,
  28.         left: 200,
  29.         opacity: 1,
  30.         zIndex: 4
  31.       },
  32.       {
  33.         width: 600,
  34.         top: 70,
  35.         left: 600,
  36.         opacity: 0.8,
  37.         zIndex: 3
  38.       },
  39.       {
  40.         width: 400,
  41.         top: 20,
  42.         left: 750,
  43.         opacity: 0.2,
  44.         zIndex: 2
  45.       }
  46.     ];
  47.  
  48.     //页面加载的事件
  49.     window.onload = function () {
  50.       var flag = true; //假设所有的动画执行完毕了---锁=====================================
  51.       var list = my$("slide").getElementsByTagName("li");
  52.  
  53.       //图片散开
  54.       function assign() {
  55.         for (var i = 0; i < list.length; i++) {
  56.           //设置每个li，用封装的animate函数，把宽，层级，透明度，left,top移动到制定的目标位置
  57.           animate(list[i], config[i], function () {
  58.             flag = true; //==============================================================
  59.           })
  60.         }
  61.       };
  62.       assign();
  63.  
  64.       //右边按钮
  65.       my$("arrRight").onclick = function () {
  66.         if (flag) { //=====================================================================
  67.           flag = false;
  68.           config.push(config.shift());
  69.           assign();// 重新分配
  70.         }
  71.       };
  72.  
  73.       //左边按钮
  74.       my$("arrLeft").onclick = function () {
  75.         if (flag) {
  76.           flag = false;
  77.           config.unshift(config.pop());
  78.           assign();
  79.         }
  80.       };
  81.  
  82.       //鼠标进入，左右焦点的div显示
  83.       my$("slide").onmouseover = function () {
  84.         animate(my$("arrow"), { "opacity": 1 });
  85.       };
  86.  
  87.       //鼠标离开，左右焦点的div隐藏
  88.       my$("slide").onmouseout = function () {
  89.         animate(my$("arrow"), { "opacity": 0 });
  90.       };
  91.     };
  92.  
  93.   </script>
  94.  
  95. </head>
  96.  
  97. <body>
  98.   <div class="wrap" id="wrap">
  99.     <div class="slide" id="slide">
  100.       <ul>
  101.         <li><a href="#"><img src="data:images/slidepic1.jpg" alt="" /></a></li>
  102.         <li><a href="#"><img src="data:images/slidepic2.jpg" alt="" /></a></li>
  103.         <li><a href="#"><img src="data:images/slidepic3.jpg" alt="" /></a></li>
  104.         <li><a href="#"><img src="data:images/slidepic4.jpg" alt="" /></a></li>
  105.         <li><a href="#"><img src="data:images/slidepic5.jpg" alt="" /></a></li>
  106.       </ul>
  107.       <div class="arrow" id="arrow">
  108.         <a href="javascript:;" class="prev" id="arrLeft"></a>
  109.         <a href="javascript:;" class="next" id="arrRight"></a>
  110.       </div>
  111.     </div>
  112.   </div>
  113.  
  114. </body>
  115.  
  116. </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. Spring Boot配置公共的线程池

    内存资源很宝贵,线程池资源不宜过多的创建,同一个应用,尽量使用统一的线程池,并且相关参数需要设置适当,不造成资源的浪费,也不影响性能的提升. import java.util.concurrent.T ...

  2. Windows API 第15篇 GetVolumeInformation 获取磁盘卷（驱动器）信息

    先看定义:BOOL GetVolumeInformation(    [IN]  LPCTSTR lpRootPathName,           // root directory  卷所在的根目 ...

  3. 微信小程序知识点梳理

    小程序介绍 17年一月9号,小程序刚发布的时候,个人很幸运的成为第一批吃螃蟹的人,当然也是第一批采坑的人. 小程序是基于微信的一种应用,使用微信自定义的组件,让我们使用JavaScript的方式,达到 ...

  4. ArccGIS 10发布WFS服务并加载到Skyline中

    下面用ArcGIS Server 10.0将建筑物图层发布为WFS服务. (1)创建mxd文件.ArcMap打开建筑物图层,存为Buildings.mxd文件.注意:必须统一空间参考系,且要与图层的坐 ...

  5. jeecms首页模板自定义

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qxy369/article/details/50387465我们在点击[查看首页]时,发现出现的并不 ...

  6. Java内功修炼系列一拦截器

    在动态代理中,我们知道在代理类中,执行真实对象的方法前后可以增加一些其他的逻辑,这些逻辑并不是真实对象能够实现的方法,比如一个租房的用户希望租一套公寓,但是中介所代理的这个房东并没有可以出租的公寓,那 ...

  7. html css javascript mysql php学习总结

    一. html:超文本标记语言,运行在浏览器上,由浏览器解析 1.格式 <!doctype html> 声明文档类型,说明html版本号 <html> 说明代码格式 <h ...

  8. 修改mysql字段类型，修改字段名

    修改字段类型(数据类型,长度,默认值) alter table user modify user_name 类型 修改字段名 方法一:alter table 表 change 旧字段名 新字段名 新数 ...

  9. SpringCloud微服务实战三:Hystix的基本概念

    1.说到隔离.熔断.降级,最出名的就是 Netflix 开源的 Hystrix 组件,Hystix官方对它描述为:Hystrix是一个延迟和容错库,旨在隔离远程系统.服务和第三方库,阻止级联故障,在复 ...

  10. 微信小程序开发（一）

    引自http://www.cnblogs.com/mdnx/p/6004653.html 第一步  (下载开发工具) https://mp.weixin.qq.com/debug/wxadoc/dev ...