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=" 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=" 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{
             25%;
            height: 800px;
            background-color: pink;
            float: left;
        }

        .content{
             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{
             100%;
            height: 1800px;
        }

        .returnTop{
             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{
             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;
             18px;
            height: 18px;
            background-color: white;
            list-style: none;

            line-height: 18px;
            text-align: center;
            border-radius: 50%;     /*圆形*/
        }

        .btn{
            position: absolute;
            top: 50%;
             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()

11. 参考

DOM事件列表

jQuery知识点参考

jQuery API 3.3.1 速查表

jQuery API W3C 速查表