【java学习之路】（javaWeb篇）006.构造函数、JQuery函数库

原创已于 2022-02-16 00:48:48 修改 · 819 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #jquery #前端 #轮播图 #导航栏

于 2022-02-16 00:32:06 首次发布

java学习之路专栏收录该内容

60 篇文章

订阅专栏

本文介绍了JavaScript中的构造函数，包括其特征和使用。深入讲解了jQuery函数库，包括选择器、事件处理、动画效果和插件使用。提到了节点关系方法如parent、siblings和children，以及animate函数实现动画。最后，通过实例展示了轮播图和百度新闻导航的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构造函数

概述：在JavaScript语言当中也有所谓构造函数【constructor】，JS当中构造函数要符合如下两个特征：

函数名字首个英文字母一般需要大写【不是决定形因素】
构造函数务必、必须、一定是一个关键字new调用的【决定形因素】

先认知关键字new

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
  //认知关键字new：它也是调用函数一种方式
  //函数声明部分
  function Fun (){
   console.log("兄弟你执行呀");
  }
  //关键字new 也是调用函数一种手段
  new Fun;
  new Fun;
  new Fun;
</script>

关键字new也是调用函数一种方式【6种方式】
关键字new需要放在函数名字前面

构造函数基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //构造函数两个特征:
   //第一：构造函数的首个英文字母一般大写的【不是决定性因素】
   //第二：函数如果是new调用的，称之为构造函数【决定形式因素】
   //问题：老师函数名+小括号调用函数执行、new调用函数也执行，两者也有什么区别呀？
   function People(){
     //第一步：在函数体中神秘创建了一个空的狭义对象【大的花括号】
     //第二步:函数体种上下文指向当前这个空的狭义对象
     //第三步：可以通过点语法给狭义对象动态添加属性、方法
     this.xingming = "小明";
     this.age = 18;
     this.sex = "男";
     this.hobby = ['吃饭','睡觉','打豆豆'];
     //第四步：虽然没有关键字return，但是系统回自动将狭义对象返回 
   }
   var obj = new People;
   console.log(obj);

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>   
<script>
    //构造函数两个特征：
    //函数名字首个英文字母需要大写的
    //函数务必使用关键字new调用的
    function Dog(name,sex,age){
      //构造函数独有四步走
      //第一步：在函数体中神秘创建了一个空的狭义对象
      //第二步：函数的上下文指向当前的空的下一对象
      //第三步：通过点语法动态给狭义对象添加属性、方法
       this.name = name;
       this.sex  = sex;
       this.age = age;
      //第四步：虽然没有关键字new，但是系统会将当前这个狭义对象返回
      for(var i = 0 ; i < 10 ;i++){};
      if(true){};
    }
    //调用函数
    var erha =  new Dog("二哈","公",3);
    var taidi  =  new Dog("泰迪","母",6);
   //因为这是两个不同对象，因为在堆空间当中内存地址不同
   console.log(erha,taidi);
</script>

构造函数也是一个函数，以前函数能做的构造函数也能在【循环、条件】
只不过构造函数可以捎带脚返回一个狭义对象而已

原型----prototype

概述：在前端工程师世界当中，构造函数就是所谓‘类’，通过四步走出来的狭义对象，称之为‘实例’：

比如上一个案例：Dog构造函数他们一般称之为Dog类 erha、taidi:一般称之为Dog类的实例；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P1iWHsEM-1644942609575)()]

任意构造函数天生都有一个prototype属性，指向一个空的狭义对象

实例天生拥有一个__proto__属性，向上面的狭义对象借用方法使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
      //任意构造函数 天生都有一个 prototype属性 ，指向一个空的狭义对象
      //创建出来的时候天生拥有一个__proto__属性，可以向上面的狭义对象借用方法使用
      function Dog(name,age,sex){
         //经历四步走
         this.name = name;
         this.age = age;
         this.sex  = sex;
      }   
      Dog.prototype.yaoren = function(){
          console.log("我可以咬人");
      }
      //创建二哈实例
      var erha = new Dog("二哈",18,"公");  
      console.log(erha); 
      erha.yaoren();
      erha.yaoren();
</script>

jQuery函数库简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery它是前端当中比较优秀的一个JavaScript函数库【前端人经常简称JQ】，它核心里面是写的少、做的事情多。JQ可以进行DOM操作、节点事件处理、简单2D动画等等。

jQuery函数库支持链式语法（连续打点），JQ有一些插件，使用JQ时候一般不用考虑兼容问题

jQuery函数库基本使用

(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！

需要在网上下载源码：http://www.jq22.com/jquery-info122

注意1：如果你想在程序当中使用JQ，需要在程序当中通过script标签引入JQ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入JQ函数库：前端人也称之为引爆 -->
    <script src="./js/jQuery.min.js"></script>
</head>

<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ul>
    <div id="box">
        我爱你祖国
    </div>
    <p class="cur">
        我是祖国的花骨朵
    </p>
</body>

</html>
<script>
    //Q函数经常用来操作节点数上标签
    //支持我们曾经学习过选择器：标签选择器、ID选择器、class选择器
    //注意1:当程序当中引入JQ，这个函数库对外暴露了一个$函数,
    //它是JQ函数库一个核心函数,经常用来匹配标签
    //标签选择器
    console.log($("li"));
    //id选择器
    console.log($("#box"));
    //类选择器
    console.log($(".cur"));
    //如果向设置匹配标签的行内样式可以连续打点css函数
    $("p").css({
        "color": "red",
        "fontSize": 30,
        "background": "cyan",
        "textAlign": "center"
    })
</script>

一般情况下单位px可以省略
中间带有横杠的样式【font-size、padding-left】可以变为驼峰写法
jQuery函数库支持我们曾经学习过标签选择器、ID选择器、class选择器等等

jQuery函数库中独有选择器

概述：以后学习的选择器只能在JQ种使用，因为它是JQ函数库中独有的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./js/jQuery.min.js"></script>
</head>

<body>
    <div>我是中国人</div>
    <div>我是巴基斯坦人</div>
    <div>我是泰国人</div>
    <div>我是日本人</div>
    <div>我是中国人</div>
    <div>我是巴基斯坦人</div>
    <div>我是泰国人</div>
    <div>我是日本人</div>
    <div>我是中国人</div>
    <div>我是巴基斯坦人</div>
    <div>我是泰国人</div>
    <div>我是日本人</div>
    <div>我是中国人</div>
    <div>我是巴基斯坦人</div>
    <div>我是泰国人</div>
    <div>我是日本人</div>
</body>

</html>
<script>
    //下面这些都是JQ函数库独有选择器
    /*:first,可以获取某一个匹配标签的第一个元素
    $("div:first").css({
        "background": "red"
    });
    //:last,可以获取到某一个匹配标签最后一个元素
    $("div:last").css({
        'background': "cyan"
    });
    */
    /*:even,代表的是偶数选择器
    $("div:even").css({
        'background': "skyblue"
    });
    //:odd，代表的是奇数选择器
    $("div:odd").css({
        'background': "pink"
    })
    */

    //:gt(index)，大于选择器
    $("div:gt(6)").css({
        'background': "red"
    });

    //:lt(index)小于选择器
    $("div:lt(6)").css({
        'color': "yellow"
    })
</script>

操作匹配标签文本

<h1>我是一级标题</h1>

表单元素【input标签】利用JQ中val方法操作表单元素文本
非表单元素利用JQ中html方法操作文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./js/jQuery.min.js"></script>
</head>

<body>
    <p>
        <input type="text" value="我是一个输入文本地方">
    </p>
    <div>我是一个粉霜将，粉霜本领强</div>
</body>

</html>
<script>
    //操作表单元素文本：利用的val方法
    //获取表单元素文本
    console.log($("input").val());
    //重新设置表单元素文本
    $("input").val("我修改了表单元素文本");
    /**************************************************************************/
    //操作非表单元素文本：利用的html方法
    //获取非表单元素文本
    console.log($("div").html());
    $("div").html("修改非表单元素文本啦么么打~~~~")
</script>

表单元素操作文本：利用val函数
非表单元素操作文本：利用html函数

给元素绑定事件

概述：jQuery函数库对于元素事件也进行封装，都封装成函数形式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./js/jQuery.min.js"></script>
</head>

<body>
    <div>我是中国人我很自豪</div>
</body>

</html>
<script>
    var f = 16;
    //JQ对于元素绑定事件都封装成函数
    $("div").click(function () {
        f++;
        //修改div的字号大小
        $(this).css({
            "fontSize": f
        })
    });
</script>

特效函数

概述：JQ函数提供一些特效函数，可以给匹配元素添加一些动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="box1">slideUp</button>
    <button id="box2">slideDown</button>
    <button id="box3">fadeOut</button>
    <button id="box4">fadeIn</button>

    <div></div>
</body>

</html>
<script>
    ///第一个按钮单击事件
    $("#box1").click(function () {
        //slideUp:可以让元素向上卷起，它传递参数2000代表动画时间（MS）
        $("div").slideUp(2000);
    });
    //第二个按钮的单击事件
    $("#box2").click(function () {
        //slideDown:可以让元素向下展开，它传递参数2000代表动画时间（MS）
        $("div").slideDown(2000);
    });
    //第三个按钮绑定单击事件
    $("#box3").click(function () {
        //fadeOut:可以让元素淡出，它传递参数2000代表动画时间（MS）
        $("div").fadeOut(2000);
    });
    //第四个按钮绑定单击事件
    $("#box4").click(function () {
        //fadeIn:可以让元素淡入，它传递参数2000代表动画时间（MS）
        $("div").fadeIn(2000);
    });
</script>

jQueryUI插件使用

概述：jQueryUI是JQ函数库一个插件。

插件：就是在JQ已有的功能基础之上，在添加一个其他功能。

注意：jQueryUI是JQ插件【也是一个JS函数库】，需要注意这个函数库依赖JQ

在使用jQueryUI的时候，务必要引入JQ才可以使用。

//拖拽的案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入JQ -->
    <script src="./js/jQuery.min.js"></script>
    <!-- 引入插件 -->
    <script src="./js/jquery-ui.min.js"></script>
</head>

<body>
    <div>
        <p>我是你的孩子~~~要拖拽</p>
    </div>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
        <li>么么打</li>
    </ul>
</body>

</html>
<script>
    //拖拽
    $("div").draggable();
    //排序拖拽
    $("ul").sortable();
</script>

//日历案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/jquery-ui.min.js"></script>
    <!-- 引入人家的样式 -->
    <link rel="stylesheet" href="./js/jquery-ui.min.css">

</head>

<body>
    <p>
        <input type="text">
    </p>
</body>

</html>
<script>
    $("input").datepicker();
</script>

JQuery函数

节点关系函数

概述：jQuery函数库中拥有一些节点（标签:element）关系一些方法提供给我们使用。

比如：可以获取某一个标签的父元素、兄弟元素、儿子元素等等

parent

概述：它是jQuery函数库提供一个节点关系方法，主要的作用是可以获取到某一个标签的父元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--利用JQ时候切记需要通过script标签进行引包  -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 100px;
            border: 1px solid black;
            margin: 100px auto;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

</html>
<script>
    //给P标签绑定单击事件，要他们的父元素div背景颜色为青色
    $("p").click(function () {
        $("p").parent().css({
            "background": "cyan"
        })
    })
</script>

parent方法可以获取到某一个标签父元素

this【函数的上下文】

概述：this不是jQuery函数库提供的，因为系统当中函数就有上下文this。函数的上下文this也可以在JQ当中使用。

总结规律：函数作为事件处理函数执行，上下文是当前这个触发事件的元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--利用JQ时候切记需要通过script标签进行引包  -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 100px;
            border: 1px solid black;
            margin: 100px auto;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>

</html>
<script>
    //单击某一个p标签，当前被单击的这个p标签背景颜色为天蓝色
    //给全部P标签绑定单击事件
    $("p").click(function () {
        //单击某一个p，当前被单击的这个p标签背景颜色为天蓝色
        $(this).css({
            "background": "skyblue"
        })
    });
</script>

函数的上下文this，也可以在JQ当中使用
它代表的是当前触发这个事件的元素（标签）

函数上下文判断五大规律？

函数的上下文(this)，函数不同执行方法，上下文是不同的.

函数名+小括号=>window
函数作为事件的处理函数执行=>当前触发这个事件元素
函数作为定时回调函数每隔一段事件执=>window
函数作为数组元素枚举出来执行=>当前数组
函数作为对象的方法执行，谁最后打点调用上下文即为谁

siblings

概述：它是jQuery函数库提供一个关系方法，主要的作用是可以获取到某一个标签其他的姊妹元素们

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--利用JQ时候切记需要通过script标签进行引包  -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 100px;
            border: 1px solid black;
            margin: 100px auto;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>

</html>
<script>
    //siblings:获取姊妹元素
    //单击某一个P让他的背景颜色为黄色，他的其余兄弟元素们为绿色
    //给P标签绑定单击事件
    $("p").click(function () {
       $(this).css({"background": "yellow"}).siblings().css({"background": "green"})
    });
    //链式语法【来源于OC语言:搞iOS苹果开发语言】
    //为了方便(书写语句的时候)可以从左到右连续打点
    //看着比较整洁
    //链式语法执行顺序：从左到右一次执行
</script>

children

概述：它也是jQuery函数库提供的一个节点关系函数，主要的作用是可以获取到某一个节点儿子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--利用JQ时候切记需要通过script标签进行引包  -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 100px;
            border: 1px solid black;
            margin: 100px auto;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <span>5</span>
    </div>
</body>

</html>
<script>
    //将四个P标签背景颜色为黑色
    /*第一种写法：
    $("p").css({
        "background": "black"
    });
    */

    $("div").children().css({
        "background": "black"
    });
</script>

animate函数

概述：它也是jQuery函数库提供一个动画函数，主要的作用是可以让元素添加一些2D动画效果。

使用格式如下：

$(selector).animate(JSON,TIME,CALLBACK);

JSON：动画属性设置【left、width、top等等】
TIME:动画时间设置（单位是MS）
CALLBACK：函数，这个函数会在动画结束的时候执行一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            /* 定位元素才有left|top|bottom|right */
            position: relative;
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div>中国</div>
</body>

</html>
<script>
    $("div").animate({
        "left": 1000,
        "top": 100,
        "width": 150,
        "height": 50,
        "background": "cyan",
        "color": "white",
        "border": "20px solid red"
    }, 5000, function () {
        //让div遍椭圆
        $(this).css({
            "borderRadius": "50%",
            "textAlign": "center"
        })
    });
</script>

animate是JQ封装一个函数动画，并不是全部的样式都可以参与动画（涉及颜色一般都不能参与动画）

动画积累问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>

<body>
    <button class="btn1">去北京</button>
    <button class="btn2">去东京</button>
    <div></div>
</body>

</html>
<script>
    //第一个按钮
    $(".btn1").click(function () {
        $("div").stop(true).animate({
            "left": 1000
        }, 2000);
    });
    //第二个按钮
    $(".btn2").click(function () {
        $("div").stop(true).animate({
            "left": 0
        }, 2000)
    })
</script>

stop(true):将匹配元素全部动画清除

实战案需求

1：淘宝轮播图

自动轮播（每隔一段时间换一张图）
鼠标放上去（自动轮播停止），鼠标移出（自动轮播有开始）
有左右按钮，单击左右按钮可以切换图片
单击不同的分页器，可以显示不同图片

2：百度新闻导航效果

鼠标移上去、移下来事件

三位轮播图

概述：轮播图英文（carousel）,类似于淘宝、京东首页轮播图，前端工程师经常叫做‘三位轮播|传统轮播’

.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="./css/planone.css">
    <!-- 引包，引入JQ -->
    <script src="./js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div>
        <ul>
            <li class="current"><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>
        <button class="lbtn">&lt;</button>
        <button class="rbtn">&gt;</button>
        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>

</html>
<script>
    //右侧按钮单击事件
    //信号量：全局变量（控制某一个li运动）
    var idx = 0;
    //右侧按钮的代码进行封装
    function rhandle() {
        //当前显示这张图片从left为0位置运动到-600
        $("ul li").eq(idx).css({
            "left": 0
        }).stop(true).animate({
            "left": -600
        }, 500);
        //全局变量累加1【下一张图要进入容器里面】
        idx++;
        idx = idx > 4 ? 0 : idx;
        //下一张图进入
        $("ul li").eq(idx).css({
            "left": 600
        }).stop(true).animate({
            "left": 0
        }, 500);
        //底下分页器也跟着变化
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
        //addClass代表给标签添加类名、removeClass代表给标签移出类名
    }
    $(".rbtn").click(rhandle);
    //开启定时器让轮播图自动轮播
    var timer = setInterval(rhandle, 1500);
    //鼠标移上事件
    $("div").mouseenter(function () {
        //清除定时器
        clearInterval(timer);
    });
    //鼠标离开事件
    $("div").mouseleave(function () {
        timer = setInterval(rhandle, 1500);
    });

    //左侧按钮的单击事件
    $(".lbtn").click(function () {
        //当前显示图片运动的动画
        $("ul li").eq(idx).css({
            "left": 0
        }).stop(true).animate({
            "left": 600
        }, 500);
        //全局变量需要累减
        idx--;
        idx = idx < 0 ? 4 : idx;
        //下一张图片动画
        $("ul li").eq(idx).css({
            "left": -600
        }).animate({
            "left": 0
        }, 500);
        //底下分页器也跟着变化
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    });
    /*****************************************************************************************/
    //底下的分页器业务
    $("ol li").click(function () {
        //获取单击的那个分页器li索引值
        var index = $(this).index();
        //分两种情况讨论
        if (index > idx) {
            //当前显示这张图片动画
            $("ul li").eq(idx).css({
                "left": 0
            }).stop(true).animate({
                "left": -600
            }, 500);
            //单击那个分页器对应的图片动画
            $("ul li").eq(index).css({
                "left": 600
            }).stop(true).animate({
                "left": 0
            }, 500);
            //全局变量idx从新赋值
            idx = index;
            //底下分页器也跟着变化
            $("ol li").eq(idx).addClass("cur").siblings().removeClass();
            //addClass代表给标签添加类名、removeClass代表给标签移出类名
        } else {
            //当前显示这张图片动画
            $("ul li").eq(idx).css({
                "left": 0
            }).stop(true).animate({
                "left": -600
            }, 500);
            //单击那个分页器对应的图片动画
            $("ul li").eq(index).css({
                "left": 600
            }).stop(true).animate({
                "left": 0
            }, 500);
            //全局变量idx从新赋值
            idx = index;
            //底下分页器也跟着变化
            $("ol li").eq(idx).addClass("cur").siblings().removeClass();
            //addClass代表给标签添加类名、removeClass代表给标签移出类名
        }

    })
</script>

.css文件

*{
	margin: 0;
	padding: 0;
}

div{
	position: relative;
	width: 600px;
	height: 400px;
	border: 1px solid black;
	margin: 50px auto;
	overflow: hidden;
}

ul{
	position: absolute;
	width: 600px;
	height: 400px;
	list-style: none;
}

img{
	width: 600px;
	height: 400px;
}

ul li{
	position: absolute;
	width: 600px;
	height: 400;
	left: 600px;
}

.current{
	left: 0px;
}

.lbtn{
	position: absolute;
	width: 35px;
	height: 35px;
	left: 0px;
	top: 40%;
}
.rbtn{
	position: absolute;
	width: 35px;
	height: 35px;
	right: 0px;
	top: 40%;
}

ol{
	position: absolute;
	width: 150px;
	height: 25px;
	left: 38%;
	bottom: 5px;
	list-style: none;
}
ol li{
	float: left;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #000000;
	color: white;
	text-align: center;
	line-height: 25px;
	margin-right: 3px;
}

.cur{
	background-color: darkturquoise;
	transform: scale(1.2);
}

百度新闻导航

.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入JQ -->
    <script src="./js/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #01204f;
        }

        ul {
            position: absolute;
            width: 100%;
            height: 40px;
            list-style: none;
        }

        ul li {
            float: left;
            padding: 10px;
            color: white;
        }

        div.slider {
            position: absolute;
            width: 52px;
            height: 41px;
            background: red;
            opacity: .8;
        }
    </style>
</head>

<body>
    <div>
        <div class="slider"></div>
        <ul>
            <li>首页</li>
            <li>国内</li>
            <li>国际</li>
            <li>军事</li>
            <li>财经</li>
            <li>娱乐</li>
            <li>体遇</li>
            <li>互联网</li>
            <li>科技</li>
            <li>科技</li>
            <li>游戏</li>
            <li>女人</li>
            <li>汽车</li>
        </ul>

    </div>
</body>

</html>
<script>
    //全部li添加鼠标以上事件
    $("li").mouseenter(function () {
        //红色滑块算法(要获取到鼠标进入的这个li,前面全部姊妹元素之和)
        //prevAll:代表的是获取某一个元素前面全部姊妹元素
        //累加器
        var sum = 0;
        $(this).prevAll().each(function () {
            //获取每一个姊妹元素宽度
            sum += $(this).innerWidth();
        });
        //让红色滑块运动起来
        $(".slider").stop(true).animate({
            "left": sum,
            "width": $(this).innerWidth()
        }, 500);
    });

    //鼠标移出，红色滑块归还原始位置
    $("div").mouseleave(function () {
        $(".slider").stop(true).animate({
            "left": 0,
            "width": $("ul li").eq(0).innerWidth()
        }, 500);
    })
</script>