jquery文档准备的三种写法：

$(document).ready(function() {

});

$().ready(function() {

});

$(function() {

});

jquery选择器

基本选择器

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

多项选择器

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

层级选择器

$('aside summary')  //aside的子元素summary

$('aside > details')  //aside的直接子元素details

$('summary + ul')  //summary相邻的下一个兄弟元素ul

$('summary ~ ul')  //summary之后的所有兄弟元素ul

属性选择器

$('[class]')

$('[class=tool]')

$('[class!=tool]')  //class不是tool

$('[class^=tool_]')  //tool_开头

$('[class$=vs]')  // vs结束

$('[class*=vs]') //含有vs

$('[type][src]')

$('[class][class*=lang][class$=y]')

过滤器

$('details > p:first-child')

$('details > p:last-child')

$('details > p:nth-child(2)')

$('details > p:nth-last-child(2)')

$('details > p:only-child')

限定type的：

$('details > p:first-of-type')

$('details > p:last-of-type')

$('details > p:nth-of-type(2)')

$('details > p:nth-last-of-type(2)')

$('details > p:only-of-type')

$('p:nth-of-type(3n)')

表单相关：

var inputs = $(':input');

var texts = $(':text');

var enabled = $(':enabled');

var disabled = $(':disabled');

var checked = $(':checked');

var selected = $(':selected');

查找和过滤

    var js = $('aside').find('.javascript');

    var details = $('aside').children('details');

    var js_parent = js.parent();

    var sass = less.next();

    var css = less.prev();

    var li = $('li').eq(8);

    var lis = php.siblings();

    var python = allLis.filter('.python'); //返回带有类名 " python'"

var noPython= allLis.not(".python'") //返回不带有类名 " python”的

jqeury事件

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

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>全屏的云南旅游相册</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/script.js"></script>

</head>

<body>

<span></span>

<nav>

    <a href="#">泸沽湖</a>

    <a href="#">丽江古城</a>

    <a href="#">茶马古道</a>

    <a href="#">就这家·云逸客栈</a>

    <a href="#">西双版纳</a>

    <a href="#">云南红酒庄</a>

    <a href="#">轿子雪山</a>

    <a href="#">普者黑</a>

    <a href="#">海埂大坝</a>

    <a href="#">玉龙湾</a>

    <a href="#">昆明郊野公园</a>

    <a href="#">欧洲风琴小镇</a>

</nav>

<div>

    <img src="data:images/1.jpg">

    <img src="data:images/2.jpg">

    <img src="data:images/3.jpg">

    <img src="data:images/4.jpg">

    <img src="data:images/5.jpg">

    <img src="data:images/6.jpg">

    <img src="data:images/7.jpg">

    <img src="data:images/8.jpg">

    <img src="data:images/9.jpg">

    <img src="data:images/10.jpg">

    <img src="data:images/11.jpg">

    <img src="data:images/12.jpg">

</div>

</body>

</html>

style.css

* { margin:; padding:; border: none; }

html,

body { overflow: hidden; height: 100%; background: #93b3c6; }

span { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background: #fff; }

nav { position: relative; display: flex; width: 78.125vw; margin: 0 auto 45px; justify-content: space-between; }

nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: ""; background: #fff; }

nav > a { font-size: 20px; position: relative; padding: 10px; text-decoration: none; color: #255d7e; border: 2px solid #5395b4; background: #fff; }

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); }

div > img { position: absolute; top:; right:; bottom:; left:; width: 98%; height: 96%; margin: auto; }

script.js

$(document).ready(function() {

    var index = 0;

    // 鼠标事件

    var mouseEvent = function(event) {

        event.stopPropagation();//阻止冒泡

        //如果是a元素（点击或者hover都可以）

        if ($(this)[0].nodeName == 'A') {

            //索引就是a元素的索引

            index = $(this).index();

        } else {

            return true;

        };

        swiper();

    };

    // 键盘事件

    var keyEvent = function(event) {

        event.stopPropagation();

        if (event.keyCode == 37) {

            // 向左箭头

            index = index > 0 ? --index : $('a').length - 1;

        } else if (event.keyCode == 39) {

            // 向右箭头

            index = index < $('a').length - 1 ? ++index : 0;

        } else {

            return true;

        }

        swiper();

    }

    // 定义鼠标事件和键盘事件

    var events = {

        mouseenter: mouseEvent,

        keydown: keyEvent

    };

    // 给a元素添加鼠标事件和键盘事件

    $('a').add(document).on(events);

    var swiper = function() {

        $('img').eq(index)

        .stop().fadeIn('slow')

        .siblings()

        .stop().fadeOut('slow');

    }

    // 初始化默认显示第一张图

    var init = function() {

        index = 0;

        swiper();

    }

    init();

});

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. window10 vs2013 SIFTGPU

    碰到的问题: 1.一大推语法错误: 所有For_EACH_OCTAVE的地方都出现了语法错误.后来查找了一下For_EACH_OCTAVE是个啥,发现是一个宏定义,也不知道宏定义定义的好好的,为啥会编 ...

  2. 异步并发利器：实际项目中使用CompletionService提升系统性能的一次实践

    场景 随着互联网应用的深入,很多传统行业也都需要接入到互联网.我们公司也是这样,保险核心需要和很多保险中介对接,比如阿里.京东等等.这些公司对于接口服务的性能有些比较高的要求,传统的核心无法满足要求, ...

  3. linux shell实用常用命令

    本文主要介绍Linux Shell的一些使用小技巧收集,非常实用,需要的朋友可以参考下. 查看本机某端口是否被占用 netstat -anpt | grep 22 查看远程某端口是否被开放 echo ...

  4. 06_TypeScript泛型

    1.泛型的定义 泛型就是解决 类,接口 方法的复用性,以及对不特定数据的支持(类型校验). 2.泛型函数 //T 表示泛型,具体什么类型是调用这个方法的时候决定的, //T可以用其他大写字母表示,传入 ...

  5. rfc文档

    你会看到很多网上关于标准的rfc文档. 如何阅读rfc 文档. https://juejin.im/post/5bf1948ff265da61553a6c97 从一个普通的RFC文档上升到Intern ...

  6. 在Kali linux下使用docker配置sqli-labs（国内源的配置和系统软件更新）

    本篇blog导航: ~前言 ~第一步:在安装好的kali配置国内源 ~第二步:安装docker ~第三步:docker下安装sqli-labs ~写在最后. 前言: 最近闲来无事,在闯关sqli-la ...

  7. linux入门系列15--文件传输之vsftp服务

    前面的系列文章基本讲完了linux管理相关的基础知识,从本篇开始讲解centos7中服务程序的部署和配置,以便为外部提供各种服务. 日常工作和娱乐中,我们所需的各种资源都离不开网络以及各种服务,我们通 ...

  8. get、post请求参数乱码解决方法（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 在实际的项目中我们会遇见中文乱码的问题,这个问题是很恶心的事,所以我在这里提供了一些解决中文乱码的方法,希望能给大家一些帮助. ...

  9. idea创建基于maven的web项目

    1.点击create new project,选择maven,点击next 2.输入项目信息,点击finish 3.进入项目后,点击菜单File->Project Structure开始配置项目 ...

  10. Android中DatePicker日期选择器的使用和获取选择的年月日

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...