jquery 基础
jQuery 是由美国人 John Resig 创建的一个JavaScript 的轻量级的框架，它能更方便的处理 HTMLdocuments、event，还能为网站提供 ajax 交互等，并且兼容 CSS3 和各种浏览器。
1. jQuery 对象
jQuery 对象是 jQuery 包装 DOM 对象后产生的对象，通过操作 jQuery 的方法可以实现对 HTML 文档的一系列操作。
jQuery 语法结构：
$('选择器/筛选器').action(); // $ 即 jQuery 对象，也可以写成 jQuery
jQuery 对象是包装 DOM 对象后产生的对象，如果一个对象时 jQuery 对象就不能用 DOM 对象的方法，反之亦然。一般地声明一个 jQuery 对象时，会在变量名前加上一个 $：
var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象
2. 选择器
要想操作 HTML 文档，就需要先找到标签，jQuery 提供了一系列的选择器来查询标签。
2.1 基本选择器
$('*') $('#id') $('.class') $('TagName') $('.class,.p,div') // 选择多个
2.2 层级选择器
$('.box1 .box2') // 后代 $('box1>.box2') //子代 $('box1+box2') // 毗邻（向下） $('.box1~box2') //
2.3 基本筛选器
$('li:first') // 第一个li标签 $('li:eq(2)') // 索引为 2 $('li:even') // 奇数 $('li:gt(1)') // 索引为 1 以后所有的（不包括1）
// 示例
$('li:first').css('color', 'red')
$('li:eq(1)').css('color', 'red')
$('li:even').css('color', 'red')
$('li:gt(1)').css('color', 'red')
2.3.1 过滤筛选器
过滤筛选器比基本筛选器方法类似但更灵活。
$('li').first()
$('li').last()
$('li').eq(2)
$('div').hasClass('box1') // div 标签是否有 box1 属性值
2.3.2 查找筛选器
查找筛选器大致分为三类：祖先类（父）、兄弟类、子孙类。
// 祖先类
$('div').parent() // 父类
$('div').parents() // 祖先类
$('div').parentsUntil() // 到哪个为止 ('.p1').parentsUntil('.box1').css('color', 'red');
// 兄弟类
//（往下找）
$('div').next() // 下一个
$('div').nextAll() // 往下找所有兄弟标签
$('div').nextUntil() // 往下找直到哪个兄弟标签为止（不包括那个标签）
// （往上找），与 next 类似
$('div').prev()
$('div').prevAll()
$('div').prevUntil()
$('div').siblings() // 除自己外所有兄弟标签，不需要循环
// 子(孙)类
$('div').children('p') // 子类
$('div').find('p') // 子孙类
2.4 属性选择器
// 支持自定义属性，<div class='box1 content'></div>
$("[id='outer']") $("[class='box1']['content']") // 支持多个属性选择
2.5 表单选择器
表单选择器只对 input 标签适用：
$("[type='text']") // 可简写为 $(':text') $("input:checked")
3. 标签操作
3.1 样式操作
添加移除判断 Class 属性
$('div').addClass('hide'); // 给 div 标签的 class 属性增加一个 hide 值
$('div').removeClass('hide'); // 移除 div 标签的 class 属性的一个 hide 值
hasClass(); // 判断样式是否存在
toggleClass(); // 切换 CSS 类名，如果有就移除，否则就添加
CSS 添加
$('.box1').css('color', 'red') // 将所有符合条件的标签变红
$('.box1').css({'color': 'red', 'font-size': '14px'})
3.2 文本操作
HTML 代码相关
jQuery 的 html、text 方法和 JavaScript 的 innerHTML、text 方式一样：
$('.box1').html() // 获取第一个匹配元素的 HTML 内容（含文本值）
$('.box1').html('<h1>标题</h1>') // 设置所有匹配元素的html内容
文本值
$('.box1').text() // 获取所有匹配元素的文本值
$('.box1').text('你好') // 替换或设置所有匹配元素的文本值
value 值
jQuery 还有一个 val() 方法，返回或设置被选元素的 value 属性的值，一般用于 input 标签：
<input type="text" value="用户名">
<button>改变文本域的值</button>
// 获取 input 标签的 value 值
// console.log($(':text').val()); // 用户名
// 改变 value 值，将用户名改变成 rose
$('button').click(function (){
$(':text').val('rose');
});
// 多选 check 和 select
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
var 只对固有属性有用，即标签没有 value 属性的，获取它为空白。
val() // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值
3.3 属性操作
attr 属性
attr 属性（全称 attribute 属性），常用于自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
prop 属性
prop 属性（全称 property 属性），常用语 checkbox 和 radio 标签：
prop(attrName) // 获取属性
prop(attrName, attrValue) // 设置属性值
removeProp(attrName) // 移除属性
Tips：
1.x 和 2.x 版本的 jQuery，使用 attr 对 checkbox 和 radio 赋值操作时，会出现 bug，3.x 以上则没有，因此最好使用 prop 操作 checkbox 和 radio 。
两者的区别
- attr：对于标签上有的能看到的属性和自定义的属性用 attr
- prop：只能取固有属性的值（如：class、id等），自定义属性取到的 undefined
- 对于返回布尔值的，如 checkbox、radio、option 判断是否被选中的尽量用 prop
- 一般情况固有属性尽量用 prop，自定义属性用 attr
// li 和 ro 为自定义属性
<div class="box1" li="conn" ro="se">
<p>jquery</p>
div 标签
</div>
console.log( $('.box1').attr('li')); // conn
console.log( $('.box1').attr('li', 'c')); // 第二个参数，替换属性，替换成 c
// prop 对自定义属性没用
console.log($('div').prop('li')); // undefined
console.log($('div').prop('class')); // box1
attr 和 prop 应用在 input 标签上：
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
console.log($(':checkbox').first().attr('checked')); // checked
console.log($(':checkbox').last().attr('checked')); // undefined（没有定义的属性）
console.log($(':checkbox').first().prop('checked')); // true，有 checked 属性，返回 true
console.log($(':checkbox').last().prop('checked')); // false，没有 checked 属性，返回 false
$(':checkbox').prop('checked', true); // 设置 checked=checked/true
$(':checkbox').prop('checked', false); // 设置 checked=checked/false
3.4 文档处理
创建新标签
var $h1 = $('<h1></h1>') // 创建一个 h1 标签并赋值给变量 $h1
$('<h1>') // 简写
$h1.html('标题') // 给 h1 标签增加文本
$h1.css('color', 'red') // 增加 css 属性
插入标签
插入标签分为从内部插入和从外部插入：
- 内部插入：即插入到某个标签内（父子）
- 外部插入：即插入到某个标签外（兄弟，同级）
内部插入：
<div class="box">
<p>你好</p>
</div>
// 插入标签，可以直接在 append() 方法里放标签，也可以先创建标签，再传入 append() 方法
var $h1 = $('<h1>') // 创建一个 h1 标签
$h1.html('一级标题'); // 添加文本
// 往下插入
$('div').append($h1); // div 标签中插入 h1标签，$('div').append('<h1>标题</h1>')
$h1.appendTo($('div')); // h1 标签插入到 div 中去
// 往上插入
$('div').prepend($h1);
$h1.prependTo($('div'));
外部插入：
// 往下插入
$('div').after($h1); // h1 与 div 同级
$h1.insertAfter($('div')); // 效果上同
// 往上插入
$('div').before($h1);
$h1.insertBefore($('div')); // 效果上同
替换标签
$('p').replaceWith($h1); // 把 p 替换为 h1
replaceAll();
删除和清空
$('p').remove(); // 标签与文本全删除
$('p').empty(); // 仅移除文本，标签仍然在
克隆标签
$(selector).clone(true|false) // 克隆标签，包括节点、文本和属性。参数可选，true：规定需复制事件处理程序，默认为 false（不复制）
<p>段落内容</p>
<button>点击复制上面的段落内容</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('button').click(function () {
$('body').append($('p').clone()); // 克隆 p 标签，并将其添加到 body 中
})
以上面的方法克隆 p 标签，发现 p 标签成指数式增长，被添加到 body 中。这是因为克隆的副本，也被克隆了一份，解决这种问题只需用 this 即可。
<script src="jquery-3.3.1.min.js"></script>
<script>
$('button').click(function () {
$('body').append($(this).prev().clone()); // 此处的 this 为 button，找到其上一个标签 p，克隆
})
4. jQuery 中的循环操作
循环数组
循环数组 arr 中的内容，并替换掉 li 的文本：
1. for 循环遍历：
<ul>
<li>23</li>
<li>45</li>
<li>67</li>
</ul>
var arr = [1, 2, 3];
for (var i=0; i<arr.length; i++){
$('li').eq(i).text(arr[i]);
}
2. each() 方法
each(object, func) 有两个参数，第一个为要循环的对象，第二个为一个函数，该函数有两个参数（x，y）。其中 x 为数组的索引值，y 为数组值。
方法一：
$.each(arr, function(x, y){
console.log(x); // x 为索引值，0/1/2
console.log(y); // y 为数组值，1/2/3
})
方法二：（循环遍历 li 标签）
$('li').each(function () {
console.log($(this)); // $(this)：每一个 li 标签
$(this).html('jquery'); // 替换 li 的所有文本
})
6. 标签尺寸
jQuery 提供了一系列处理标签元素尺寸的重要方法。
offset() 方法
offset() 方法是元素相对于视口（浏览器窗口）的偏移量。
$(selector).offset().top; // 距离视口顶部的像素
$(selector).offset().left; // 距离视口左边的像素
position() 方法
position() 方法是标签元素相对于已定位的父标签的偏移量，如父标签没有定位，则以 body 标签为参照（相当于视口）。
$(selector).position().top; // 顶部距离已定位的父标签的像素
$(selector).position().left; // 左边距离已定位的父标签的像素
元素尺寸
// 元素内容区尺寸，无参数时为获取其值，有参数时为设置其尺寸
$(selector).width(); // $(selector).width('300px');
$(selector).height();
// 获取元素的高宽（包括内边距 padding）
$(selector).innerWidth();
$(selector).innerHeight();
// 获取元素的高宽（包括内边距和边框 padding+border）
// 要想包含外边距（margin），可以添加一个参数 true，$(selector).outerWidth(true);
$(selector).outerWidth();
$(selector).outerHeight();
滚动条
$('window').scrollTop(); // 滚动条距离顶部的位置（像素）
$('window').scrollLeft(); // 滚动条距离左边的位置（像素）
$('window').scrollTop(0); // 返回顶部
需要配合 window.onscroll 事件监听滚动条：
window.onscroll=function (){
if ($('window').scrollTop() > 1000){ // 当大于 1000像素时，隐藏返回顶部
$('selector').removeClass('hide');
}
else{
$('selector').addClass('hide'); // 小于 1000，显示返回顶部
}
}
function returnTop(){
$('window').scrollTop(0); // 返回顶部
}
window.onscroll 表示监听的是整个窗口，也可以给某个区域（盒子）监听：
7. 事件
常用事件
jQuery 常用事件有：
$('selector').click(function(){...}) // 点击即触发
$('selector')hover(function(){...}) // 鼠标悬浮其上即触发
$('selector')blur(function(){...})
$('selector')focus(function(){...})
$('selector')change(function(){...}) // value 值发生变化触发，如：监听input输入值变化
$('selector')keyup(function(){...})
页面载入
JS/jQuery 代码放在 head 中，会导致找不到标签，这是因为HTML还没加载完毕，找不到。JS 中用 onload 事件解决，jQuery 使用 ready()：
$(document).ready(function(){
jquery 代码;
})
$(function(){}) // 简写
事件绑定
// 在标签中绑定事件
function 函数名(){}
// 先找到标签，再在 script 中绑定 $(selector).事件(函数(){})
$(selector).click(function(){
alert('hello');
})
// bind() 方法绑定，unbind() 方法解除绑定 $(selector).bind(事件, 函数(){})
$(selector).bind('click', function(){
alert('hello');
})
除了上面三种比较常见的事件绑定方法以外，jQuery 还提供了一种更便捷的方法—— 事件委托：
$('').on(event, [selector], [data], fn) // 在选择元素上绑定一个或多个事件的事件处理函数
$('ul').on('click', 'li', function(){}) // ul 上级标签，li 自己
示例：点击增加按钮，添加 li 标签。点击 li 标签，弹出警告框
<ul>
<li>hello</li>
<li>hi</li>
</ul>
<button>增加</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
var $ele = $('<li>');
$ele.html(123);
$('ul').append($ele);
});
$('ul').on('click', 'li', function () {
alert(666);
})
});
</script>
Tips：使用事件委托绑定事件，可以使得新增的标签也能添加此事件，其他的绑定方式做不到。
jQuery 中绑定 click 事件重复执行问题
<script type="text/javascript">
$(function () {
$(".dv").click(function () {// 第一种
alert("Hello World");
});
$(".dv").on("click",function () { //第二种
alert("Hello World");
});
$(".dv").bind("click",function () { //第三种
alert("Hello World");
})
})
</script>
解决办法：
// 第一种，不推荐使用该方法绑定事件
// 第二种
// 在绑定事件之前，先解绑之前绑定的事件，是 on 绑定事件，off 取消绑定，bind 绑定事件，unbind 取消事件
$(".dv").off("click").on("click",function () { //第二种
alert("Hello World");
});
$(".dv").unbind("click").bind("click",function () { //第二种
alert("Hello World");
});
// 第三种，用 one 来绑定事件，放在循环里会出现问题
$('.dv').one('click', function(){
alert('hello world);
})
// 根本解决，前面说到之所以会重复绑定到这个事件，是因为匿名函数，所以你可以把这个事件放到外面来，这样在循环的过程中，指针会一直指向这个已经创建的命名函数，不会重复创建空间。具体操作如下：
$(".dv").on("click",btn);
function btn() {
alert("Hello World");
}
8. 动画效果
8.1 显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
// 显示
$('#show').click(function () {
$('p').show(1000); // 1000 为延迟时间
});
// 隐藏
$('#hide').click(function () {
$('p').hide(1000);
});
// 切换
$('#toggle').click(function () {
$('p').toggle(1000);
});
})
</script>
</head>
<body>
<p>要显示和隐藏的文本</p>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">切换</button>
</body>
</html>
8.2 滑动
滑动类似于显示和隐藏，只是方法有点稍微变动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('#slideDown').click(function () {
$('p').slideDown(1000);
});
$('#slideUp').click(function () {
$('p').slideUp(1000);
});
$('#slideToggle').click(function () {
$('p').slideToggle(1000);
})
})
</script>
</head>
<body>
<p style="width: 600px; height: 200px; background-color: pink;=">要显示和隐藏的文本</p>
<button id="slideDown">显示</button>
<button id="slideUp">隐藏</button>
<button id="slideToggle">切换</button>
</body>
</html>
8.3 淡入淡出
淡入淡出可以用来做轮播图，其原理是对元素设置透明度，共四个方法：
fadeIn(timeout)
fadeOut(timeout)
fadeToggle(timeout)
fadeTo(timeout, 透明度) // 将图片透明度设置为 0.4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('#in').click(function () {
$('.box').fadeIn(1000);
});
$('#out').click(function () {
$('.box').fadeOut(1000);
});
$('#toggle').click(function () {
$('.box').fadeToggle(1000);
});
$('#to').click(function () {
$('.box').fadeTo(1000, 0.4);
});
})
</script>
</head>
<body>
<div class="box" style="width: 100px; height: 100px; background-color: pink">内容区</div>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="to">fadeto</button>
</body>
</html>
8.4 回调函数
回调函数可以在任意事件中，等事件处理完毕后，再执行函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回调函数</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('#hide').click(function () {
$('.box').hide(1000, function () {
alert('hello'); // 隐藏事件触发后，才执行
})
})
})
</script>
</head>
<body>
<div class="box">回调函数</div>
<button id="hide">隐藏</button>
</body>
</html>
9. 拓展方法
jQuery 有一系列的方法用来操作HTML文档，同时它也可以自定义一些方法，有两种自定义方式：
$.extend({方法名:function()}) // 自定义静态方法
$.fn.extend({方法名:function()}) // 自定义 jQuery 实例一个方法
自定义一个比较大小的方法：
$.extend({
min:function (x, y) {
return x < y ? x : y;
}
});
console.log($.min(3, 4));
自定义一个循环遍历获取标签的文本的方法：
// 方法一：利用 for 循环
$.fn.extend({
getText:function () {
for (var i=0; i<this.length; i++){
console.log(this[i].innerHTML);
}
}
});
$('li').getText();
// 方法二：利用 jQuery 自带的 each 方法
$.fn.extend({
getText:function () {
$.each($(this), function (x, y) {
console.log($(y).html());
})
}
});
$('li').getText();
10. 示例
10.1 左侧菜单
左侧有三个菜单，点击任意一个菜单，菜单中的子项全部展开，另外两个菜单的子项全部隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.menu{
width: 25%;
height: 800px;
background-color: pink;
float: left;
}
.content{
width: 75%;
height: 800px;
background-color: yellow;
float: left;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="'outer">
<div class="menu">
<div class="item">
<div content="title" onclick="show(this)">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div content="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div content="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content">
<h1>内容区</h1>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// that 接收 this，this 为鼠标点击的对象
function show(that) {
$(that).next().removeClass('hide'); // 点击一个菜单，菜单中的子项展开
$(that).parent().siblings().children('.con').addClass('hide'); // 点击一个菜单，另外两个隐藏
}
</script>
</body>
</html>
10.2 全选取消反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page1</title>
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px solid black">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
function selectAll(){
$(':checkbox').prop('checked', true);
}
function cancel(){
$(':checkbox').prop('checked', false);
}
// 利用了 each() 遍历循环每一个 input 标签
function reverse(){
$(':checkbox').each(function () {
if ($(this).prop('checked')){
$(this).prop('checked', false);
}
else {
$(this).prop('checked', true);
}
})
}
</script>
</body>
</html>
10.3 返回顶部
利用 $('window').scrollTop() 方法监控滚动条距离顶部的位置，当 $('window').scrollTop(0)时，说明滚动条距离顶部距离为 0，即返回顶部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
.box{
width: 100%;
height: 1800px;
}
.returnTop{
width: 80px;
height: 50px;
color: white;
background-color: #999999;
line-height: 50px;
text-align: center;
position: fixed;
right: 20px;
bottom: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
window.onscroll=function () {
// console.log($(window).scrollTop());
if ($(window).scrollTop() > 800){ // 当大于 800像素时，隐藏返回顶部
$('.returnTop').removeClass('hide');
}
else {
$('.returnTop').addClass('hide'); // 小于 800，显示返回顶部
}
};
function returnTop() {
$(window).scrollTop(0); // 返回顶部
}
</script>
</body>
</html>
10.4 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.outer{
width: 593px;
height: 471px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
top: 0;
left: 0;
list-style: none;
}
.num{
position: absolute;
bottom: 20px;
left: 220px;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
list-style: none;
line-height: 18px;
text-align: center;
border-radius: 50%; /*圆形*/
}
.btn{
position: absolute;
top: 50%;
width: 30px;
height: 60px;
background-color: #999999;
font-size: 30px;
color: white;
line-height: 60px;
text-align: center;
margin-top: -30px;
opacity: 0.7;
display: none; /*隐藏*/
}
.outer:hover .btn{
display: block;
}
.right{
right: 0;
}
.outer .num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a><img src="images/1.png"></a></li>
<li><a><img src="images/2.png"></a></li>
<li><a><img src="images/3.png"></a></li>
<li><a><img src="images/4.png"></a></li>
<li><a><img src="images/5.png"></a></li>
<li><a><img src="images/6.png"></a></li>
</ul>
<ul class="num">
<!--<li class="active">1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--<li>5</li>-->
<!--<li>6</li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 初始化索引值
var i = 0;
// 获取图片数量（6）
var img_num = $('.img li').length;
// 通过 jQuery活动添加 li 标签，即中间的小圆点
for (var j=0; j<img_num; j++){
$('.num').append('<li></li>')
}
// 手动轮播(鼠标移动到小圆点上时，小圆点显示相应背景样式，并切换出对应图)
$('.num li').mousemove(function () {
// 获取当前li的索引值，当鼠标移动到哪个小圆点上时，即第几个 li 标签
i = $(this).index();
// 添加红色背景样式（鼠标移动到哪个小圆点上，即变红，其他没有颜色）
$(this).addClass('active').siblings().removeClass('active');
// 鼠标点击哪个小圆点，用其li 索引，获取对应图片，其余图片隐藏
$('.img li').eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
});
// 自动轮播，没过1.5s，轮播一次
var clock = setInterval(Go_R, 1500); // 定义一个闹钟
// 向右
function Go_R() {
if (i==img_num-1){
i =-1
}
i++;
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
// 清除自动轮播，当鼠标浮动到图片上时，自动轮播消失，鼠标移开时则继续自动轮播
$('.outer').hover(function () {
clearInterval(clock);
},function () {
clock=setInterval(Go_R, 1500)
});
// 向左
function Go_L() {
if (i==0){
i = img_num
}
i--;
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
// 左右定播
$('.right').click(Go_R);
$('.left').click(Go_L);
// 鼠标移动到图片、左右方向以及小圆点上变成小手
$('.img li').css("cursor","pointer");
$('.btn').css("cursor","pointer");
$('.num li').css("cursor","pointer");
// //鼠标移动到小圆点上时，小圆点显示相应背景样式，并切换出对应图
// $('.num li').mousemove(function () {
// i = $(this).index();
// $(this).addClass('active').siblings().removeClass('active');
// $('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
// })
</script>
</body>
</html>
知识点参考
- hover() 函数
jQueryObject.hover( handlerIn , handlerOut ) // 鼠标移入、移出元素时的事件处理函数
- mouseover() 函数
鼠标进入某个元素时触发：
jQueryObject.mouseover( [[ data ,] handler ] )
- index()函数
搜索匹配元素，并返回相应元素的索引值，从 0 开始
$('li').index()
