案例：旋转木马

页面加载时候出现的效果，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. mysql limit 偏移量过大效率解决方式 转贴

    原文地址:https://www.jianshu.com/p/f8d81df7ab28 SELECT * FROM product , ) limit SELECT * FROM product a ...

  2. Python学习day38-并发编程(线程)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  3. <scrapy爬虫>爬取猫眼电影top100详细信息

    1.创建scrapy项目 dos窗口输入: scrapy startproject maoyan cd maoyan 2.编写item.py文件(相当于编写模板,需要爬取的数据在这里定义) # -*- ...

  4. PageBarHelper分页显示类

    一共有两个分页类,都可以使用(单独使用) using System;using System.Collections.Generic;using System.Linq;using System.Te ...

  5. <el-tag></el-tag>部分属性与vue版本的兼容问题

    [01]标签使用按钮样式<el-tag effect="dark" v-if="myhotelinfo.runstatus=='T'" type=&quo ...

  6. springmvc-@RequestBody无法映射首字母大写的属性

    @RequestBody可以将前台传入的json格式数据自动映射成对象,当如果属性的首字母大写,则会出现不能映射的情况,如: private String ICCID;会出现映射失败的情况 解决办法: ...

  7. 项目无法依赖Springboot打出的jar

    1.原因 因为springboot-maven-plugin打包的第一级目录为Boot-INF,无法引用 2.解决 不能使用springboot项目自带的打包插件进行打包 <build> ...

  8. C++中如何实现像Java中接口功能--C++抽象类(纯虚函数，虚函数)

    在Java中定义个接口,之后可以定义不同的类来实现接口,如果有个函数的参数为这个接口的话,就可以对各自的类做出不同的响应. 如: interface animal { public void info ...

  9. 历届试题_DNA比对

    脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C.T.     ...

  10. 判断django中的orm为空

    result= Booking.objects.filter() #方法一 .exists() if result.exists(): print "QuerySet has Data&qu ...