jquery文档准备的三种写法：

  1. $(document).ready(function() {
  2. });
  3.  
  4. $().ready(function() {
  5. });
  6.  
  7. $(function() {
  8. });

jquery选择器

基本选择器

  1. $('*') / $('.div') / $('div') / $('#first') /

多项选择器

  1. $('#first, div, .second')

层级选择器

  1. $('aside summary')  //aside的子元素summary
  2. $('aside > details')  //aside的直接子元素details
  3. $('summary + ul')  //summary相邻的下一个兄弟元素ul
  4. $('summary ~ ul')  //summary之后的所有兄弟元素ul

属性选择器

  1. $('[class]')
  2. $('[class=tool]')
  3. $('[class!=tool]')  //class不是tool
  4. $('[class^=tool_]')  //tool_开头
  5. $('[class$=vs]')  // vs结束
  6. $('[class*=vs]') //含有vs
  7. $('[type][src]')
  8. $('[class][class*=lang][class$=y]')

过滤器

  1. $('details > p:first-child')
  2. $('details > p:last-child')
  3. $('details > p:nth-child(2)')
  4. $('details > p:nth-last-child(2)')
  5. $('details > p:only-child')

限定type的：

  1. $('details > p:first-of-type')
  2. $('details > p:last-of-type')
  3. $('details > p:nth-of-type(2)')
  4. $('details > p:nth-last-of-type(2)')
  5. $('details > p:only-of-type')
  6. $('p:nth-of-type(3n)')

表单相关：

  1. var inputs = $(':input');
  2. var texts = $(':text');
  3. var enabled = $(':enabled');
  4. var disabled = $(':disabled');
  5. var checked = $(':checked');
  6. var selected = $(':selected');

查找和过滤

  1.     var js = $('aside').find('.javascript');
  2.     var details = $('aside').children('details');
  3.     var js_parent = js.parent();
  4.     var sass = less.next();
  5.     var css = less.prev();
  6.     var li = $('li').eq(8);
  7.     var lis = php.siblings();
  8.     var python = allLis.filter('.python'); //返回带有类名 " python'"
  9. var noPython= allLis.not(".python'") //返回不带有类名 " python”的

jqeury事件

实现全屏的云南旅游相册（带动画效果）

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>全屏的云南旅游相册</title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. <script type="text/javascript" src="js/jquery.js"></script>
  8. <script type="text/javascript" src="js/script.js"></script>
  9. </head>
  10. <body>
  11. <span></span>
  12. <nav>
  13.     <a href="#">泸沽湖</a>
  14.     <a href="#">丽江古城</a>
  15.     <a href="#">茶马古道</a>
  16.     <a href="#">就这家·云逸客栈</a>
  17.     <a href="#">西双版纳</a>
  18.     <a href="#">云南红酒庄</a>
  19.     <a href="#">轿子雪山</a>
  20.     <a href="#">普者黑</a>
  21.     <a href="#">海埂大坝</a>
  22.     <a href="#">玉龙湾</a>
  23.     <a href="#">昆明郊野公园</a>
  24.     <a href="#">欧洲风琴小镇</a>
  25. </nav>
  26. <div>
  27.     <img src="data:images/1.jpg">
  28.     <img src="data:images/2.jpg">
  29.     <img src="data:images/3.jpg">
  30.     <img src="data:images/4.jpg">
  31.     <img src="data:images/5.jpg">
  32.     <img src="data:images/6.jpg">
  33.     <img src="data:images/7.jpg">
  34.     <img src="data:images/8.jpg">
  35.     <img src="data:images/9.jpg">
  36.     <img src="data:images/10.jpg">
  37.     <img src="data:images/11.jpg">
  38.     <img src="data:images/12.jpg">
  39. </div>
  40. </body>
  41. </html>

style.css

  1. * { margin:; padding:; border: none; }
  2.  
  3. html,
  4. body { overflow: hidden; height: 100%; background: #93b3c6; }
  5.  
  6. span { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background: #fff; }
  7.  
  8. nav { position: relative; display: flex; width: 78.125vw; margin: 0 auto 45px; justify-content: space-between; }
  9. nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: ""; background: #fff; }
  10. nav > a { font-size: 20px; position: relative; padding: 10px; text-decoration: none; color: #255d7e; border: 2px solid #5395b4; background: #fff; }
  11.  
  12. div { position: relative; overflow: hidden; width: 78.125vw; height: 75vh; margin: 0 auto; background: #fff; box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3); }
  13. div > img { position: absolute; top:; right:; bottom:; left:; width: 98%; height: 96%; margin: auto; }

script.js

  1. $(document).ready(function() {
  2.     var index = 0;
  3.  
  4.     // 鼠标事件
  5.     var mouseEvent = function(event) {
  6.         event.stopPropagation();//阻止冒泡
  7.         //如果是a元素（点击或者hover都可以）
  8.         if ($(this)[0].nodeName == 'A') {
  9.             //索引就是a元素的索引
  10.             index = $(this).index();
  11.         } else {
  12.             return true;
  13.         };
  14.         swiper();
  15.     };
  16.  
  17.     // 键盘事件
  18.     var keyEvent = function(event) {
  19.         event.stopPropagation();
  20.         if (event.keyCode == 37) {
  21.             // 向左箭头
  22.             index = index > 0 ? --index : $('a').length - 1;
  23.         } else if (event.keyCode == 39) {
  24.             // 向右箭头
  25.             index = index < $('a').length - 1 ? ++index : 0;
  26.         } else {
  27.             return true;
  28.         }
  29.         swiper();
  30.     }
  31.  
  32.     // 定义鼠标事件和键盘事件
  33.     var events = {
  34.         mouseenter: mouseEvent,
  35.         keydown: keyEvent
  36.     };
  37.     // 给a元素添加鼠标事件和键盘事件
  38.     $('a').add(document).on(events);
  39.  
  40.     var swiper = function() {
  41.         $('img').eq(index)
  42.         .stop().fadeIn('slow')
  43.         .siblings()
  44.         .stop().fadeOut('slow');
  45.     }
  46.  
  47.     // 初始化默认显示第一张图
  48.     var init = function() {
  49.         index = 0;
  50.         swiper();
  51.     }
  52.     init();
  53. });

Jquery基础（动画效果的轮播图特效）的更多相关文章

  1. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  2. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  4. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  5. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. CSS3之动画模块实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  8. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 2、原生js实现轮播图特效

    很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...

随机推荐

  1. POJ_2593_DP

    http://poj.org/problem?id=2593 和2479一样. #include<iostream> #include<cstdio> #define MIN ...

  2. vs 中明明包含了头文件所在路径，但是却找不到头文件

    vs基本不会出错,那么出错的只能是自己了. 哎,又被自己给蠢死了. 你可能在上面两个地方添加好了include 目录,但是却依然编译失败,失败的提示是找不到头文件所在路径,这是为什么呢. 很简单,因为 ...

  3. redis说明及部署

    一.reids 概述 redis全称REmote DIctionary Server.一个基于KV的持久化分布式数据库.所编写的语言为C.与另一个分布式缓存Memcached有几分相似 但是redis ...

  4. P3387缩点(tarjan+拓扑排序+线性dp)

    题目描述 给定一个 n个点 m 条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点,但是,重复经过的点,权值只计算一次. 输入 ...

  5. 怎么理解Laravel的核心架构

    使用过larave框架的朋友都知道laravel框架里面除了提供一些基本的功能(如控制器.视图.模型)之外,还有中间件.门面.契约等,这些东西是如何在laravel框架运用起来的呢?今天就和大家详聊一 ...

  6. vue的组件传值

    1.父组件向子组件传值 父组件: 123456789101112 <template> <child :name="name"></child> ...

  7. PBFT 算法 java实现（下）

    PBFT 算法的java实现(下) 在上一篇博客中(如果没有看上一篇博客建议去看上一篇博客),我们介绍了使用Java实现PBFT算法中节点的加入,view的同步等操作.在这篇博客中,我将介绍PBFT算 ...

  8. mac 软件相关的

    mac 系统教学 https://www.w3cschool.cn/macdevsetup/carp1i83.html 可以查看的软件网站 https://www.ifunmac.com/ https ...

  9. 在线使用iconfont字体图标

    登录https://www.iconfont.cn 把需要的图标加入购物车,然后加入项目 打开我的项目,生成代码 有3中方式使用图标 unicode和font class本质都是使用字体,好处在于兼容 ...

  10. tensorflow打印可用设备列表

    from tensorflow.python.client import device_libprint(device_lib.list_local_devices())