• jQuery【菜单功能、淡入淡出轮播图(上)、淡入淡出轮播图(下)、折叠面板】(五)-全面详解（学习总结---从入门到深化）

     

    目录

    菜单功能

    淡入淡出轮播图(上)

    淡入淡出轮播图(下)

    折叠面板

    菜单功能

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9.     <style>
    10.        * {
    11.             margin: 0;
    12.             padding: 0;
    13.        }
    14.         .menu {
    15.             list-style: none;
    16.             width: 500px;
    17.             height: 50px;
    18.             background: skyblue;
    19.             margin: 100px auto;
    20.        }
    21.         .menu>li {
    22.             float: left;
    23.             width: 99px;
    24.             height: 50px;
    25.             line-height: 50px;
    26.             font-size: 20px;
    27.             border-right: 1px solid white;
    28.             text-align: center;
    29.        }
    30.         .menu>li:nth-child(5){
    31.             border-right: 0;
    32.        }
    33.         .dropdown {
    34.             list-style: none;
    35.             display: none;
    36.             width: 99px;
    37.        }
    38.         .dropdown li {
    39.             width: 99px;
    40.             height: 30px;
    41.             line-height: 30px;
    42.             background: orange;
    43.        }
    44.     style>
    45. head>
    46. <body>
    47.     <ul class="menu">
    48.         <li>
    49.            菜单1
    50.             <ul class="dropdown">
    51.                 <li>菜单1li>
    52.                 <li>菜单1li>
    53.                 <li>菜单1li>
    54.                 <li>菜单1li>
    55.                 <li>菜单1li>
    56.                 <li>菜单1li>
    57.             ul>
    58.         li>
    59.         <li>
    60.            菜单2
    61.             <ul class="dropdown">
    62.                 <li>菜单2li>
    63.                 <li>菜单2li>
    64.                 <li>菜单2li>
    65.                 <li>菜单2li>
    66.                 <li>菜单2li>
    67.                 <li>菜单2li>
    68.             ul>
    69.         li>
    70.         <li>菜单3li>
    71.         <li>菜单4li>
    72.         <li>菜单5li>
    73.     ul>
    74.     <script>
    75.         $('.menu li').mouseenter(function (){
    76.           $(this).children('.dropdown').slideDown();
    77.        });
    78.         $('.menu li').mouseleave(function (){
    79.           $(this).children('.dropdown').slideUp();
    80.        });
    81.     script>
    82. body>
    83. html>

    淡入淡出轮播图(上)
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>Documenttitle>
    6.  <style>
    7.  *{
    8.      margin: 0;
    9.      padding: 0;
    10.  }
    11.  .box{
    12.      width: 560px;
    13.      height: 300px;
    14.      border: 5px solid gray;
    15.      margin: 100px auto;
    16.      position: relative;
    17.      overflow: hidden;
    18.  }
    19.  .m_unit{
    20.      width: 10000px;
    21.      height: 300px;
    22.      position: absolute;
    23.      top: 0;
    24.      left: 0;
    25.  }
    26.  .m_unit ul{
    27.      overflow: hidden;
    28.  }
    29.  .m_unit ul li{
    30.      list-style: none;
    31.      position: absolute;
    32.      top: 0px;
    33.      left: 0px;
    34.      width: 560px;
    35.      height: 300px;
    36.      display: none;
    37.  }
    38.  .m_unit ul li.current{
    39.      display: block;
    40.  }
    41.  /*左右按钮*/
    42.  .btn span{
    43.      width: 55px;
    44.      height: 55px;
    45.      background:
    46. url('images/btnL.png');
    47.      position: absolute;
    48.      border-radius:  10px;
    49.      top: 50%;
    50.      margin-top: -28px;
    51.  }
    52.  .btn span.right{
    53.      background: url('images/btnR.png');
    54.      right: 0;
    55.  }
    56.  /*小圆点*/
    57.  .circle ul li{
    58.      list-style: none;
    59.      float: left;
    60.      width: 20px;
    61.      height: 20px;
    62.      background: orange;
    63.      margin-right: 10px;
    64.      border-radius: 50%;
    65.  }
    66.  .circle ul{
    67.      overflow: hidden;
    68.  }
    69.  .circle{
    70.      position: absolute;
    71.      bottom: 10px;
    72.      right: 10px;
    73.  }
    74.  .circle ul li.current{
    75.      background: red;
    76.  }
    77.  style>
    78. head>
    79. <body>
    80.  <div class="box" id='box'>
    81.      <div class="m_unit" id='m_unit'>
    82.        <ul>
    83.           <li class='current'><a href="#"><img src="images/0.jpg" alt="">a>li>
    84.           <li><a href="#"><img src="images/1.jpg" alt="">a>li>
    85.           <li><a href="#"><img src="images/2.jpg" alt="">a>li>
    86.           <li><a href="#"><img src="images/3.jpg" alt="">a>li>
    87.           <li><a href="#"><img src="images/4.jpg" alt="">a>li>
    88.        ul>
    89.      div>
    90.      <div class="btn">
    91.          <span class='left' id='leftBtn'>span>
    92.          <span class='right' id='rightBtn'>span>
    93.      div>
    94.      <div class="circle" id='circle'>
    95.          <ul>
    96.              <li class='current'>li>
    97.              <li>li>
    98.              <li>li>
    99.              <li>li>
    100.              <li>li>
    101.          ul>
    102.      div>
    103.    div>
    104.  body>
    105. html>

    淡入淡出轮播图(下)

    1. // 显示哪张图片的索引
    2. var idx = 0;
    3. var $lis = $('#m_unit ul li');
    4. var imgLength = $lis.length;
    5. // 定时器
    6. var timer = setInterval(rightHandler, 2000);
    7. // 鼠标滑动到元素上移除定时器不在自动轮播
    8. $('#box').mouseenter(function () {
    9.     clearInterval(timer);
    10. });
    11. // 鼠标离开元素,开启自动轮播
    12. $('#box').mouseleave(function () {
    13.     timer = setInterval(rightHandler, 2000);
    14. });
    15. // 点击右按钮,元素增加
    16. $('#rightBtn').click(rightHandler);
    17. function rightHandler() {
    18.     $lis.eq(idx).fadeOut(1000);
    19.     idx++;
    20.     if (idx > imgLength - 1){
    21.         idx = 0
    22.    };
    23.     $lis.eq(idx).fadeIn(1000);
    24.     changecircle();
    25. }
    26. // 点击左按钮,元素减少
    27. $('#leftBtn').click(function () {
    28.     $lis.eq(idx).fadeOut(1000);
    29.     idx--;
    30.     if (idx < 0) {
    31.         idx = imgLength - 1
    32.    };
    33.     $lis.eq(idx).fadeIn(1000);
    34.     changecircle();
    35. });
    36. // 点击指示器,进行切换元素
    37. $('#circle ul li').each(function () {
    38.     $(this).click(function () {
    39.         // index():获取当前元素的索引值
    40.         var circleidx = $(this).index();
    41.         if (circleidx == idx) {
    42.             return
    43.        };
    44.         $lis.eq(idx).fadeOut(1000);
    45.         idx = circleidx;
    46.         $lis.eq(idx).fadeIn(1000);
    47.         changecircle();
    48.    });
    49. });
    50. // 切换指示器样式
    51. function changecircle() {
    52.     $('#circle ul li').eq(idx).css('background','red').siblings().css('background', 'orange');
    53. }

    折叠面板

    1. DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.  <meta charset="UTF-8">
    5.  <title>折叠面板title>
    6.  <script src="./js/jquery-3.6.0.min.js">script>
    7.  <style>
    8.  * {
    9.      margin: 0;
    10.      padding: 0
    11.  }
    12.  .container {
    13.      width: 600px;
    14.      margin: 80px auto;
    15.  }
    16.  .container ul {
    17.      list-style: none
    18.  }
    19.  .container ul li h3 {
    20.      border-bottom: 1px solid black;
    21.      background-color: skyblue;
    22.      position: relative
    23.  }
    24.  .container ul li h3 span {
    25.      position: absolute;
    26.      right: 5px
    27.  }
    28.  .container ul li .cont {
    29.      display: none
    30.  }
    31.  style>
    32. head>
    33. <body>
    34.      <div class="container">
    35.          <ul>
    36.              <li>
    37.                  <h3>Section1<span>>span>h3>
    38.                  <div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing
    39. elit.Praesent nisl lorem,dictum id pellentesque at, vestibulum ut
    40. arcu.
    41.  Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.
    42.  Vivamus condimentum laoreet lectus, blandit posuere tortor
    43. aliquam vitae.
    44.  Curabitur molestie eros.
    45.                 div>
    46.              li>
    47.              <li>
    48.                  <h3>Section2 <span>>span>h3>
    49.                      <div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    50.  Praesent nisl lorem, dictum id pellentesque at, vestibulum ut
    51. arcu.
    52.  Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.
    53.  Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.
    54.  Curabitur molestie eros.
    55.                      div>
    56.              li>
    57.              <li>
    58.                  <h3>Section3 <span>>span>h3>
    59.                  <div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing
    60. elit.
    61.  Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu.
    62.  Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo.
    63.  Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae.
    64.  Curabitur molestie eros.
    65.                 div>
    66.              li>
    67.          ul>
    68.      div>
    69.  <script>
    70.  $('h3').click(function () {
    71.  if ($(this).siblings().is(':visible')) {
    72.      //如果是可见的，就把内容收起来
    73.      $(this).siblings().slideUp();
    74.      //变更符号
    75.      $(this).find('span').html('>');
    76.  } else {
    77.      //在展开当前标题的内容之前，先把其他内容收起来
    78.      $(this).parent().siblings().find('.cont').slideUp();
    79.      //如果是不可见的，把内容div显示
    80.  
    81.      $(this).siblings().slideDown();
    82.      // 变更其他元素符号
    83.      $(this).parent().siblings().find('span').html('>');
    84.      //变更符号
    85.      $(this).find('span').html('v');
    86.     }
    87.   })
    88.  script>
    89. body>
    90. html>

  • 相关阅读:
    Java基础--阳光总在风雨后，请相信彩虹
    Node.js基础总结
    Kafka生产者消息异步发送并返回发送信息api编写教程
    Python数据分析案例10——北向资金流入与沪深300涨跌幅分析
    前端vue 自定义步骤条
    安卓手机APP开发__媒体开发部分__媒体项
    怎样提高服务器安全性？45.248.11.x
    编写bat脚本调用hexview进行软件签名
    带头双向循环链表
    【Node】node的Console模块使用。
  • 原文地址：https://blog.csdn.net/m0_58719994/article/details/134411698