---恢复内容开始---

前情提要:

　　jq 是用来降低js 的工作的一个组件

　　一:利用jq 实现动画效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7.     <style>
  8.     .box,.box2{
  9.         width: 100px;
  10.         height: 100px;
  11.         background-color: red;
  12.         position: absolute;
  13.         left:;
  14.         right:;
  15.         margin: auto;
  16.     }
  17.     </style>
  18. </head>
  19. <body>
  20.     <!--<div class="box"></div>-->
  21.     <div class="box2"></div>
  22.     <script>
  23.     // 参数1, json对象，动画最终效果，使用css来表单，
  24.     // 参数2, 整数，毫秒单位[1s = 1000毫秒ms]
  25.     // 参数3，字符串，控制动画变化效果，默认匀速linear,可以设置为缓动效果swing
  26.     // 参数4，匿名函数,控制动画完成以后，后续操作
  27.     // $(".box").animate({"width":"100px","height":"50px"},2000);
  28.     $(".box2").animate({"right":"600px"},,"swing",function(){
  29.         $(this).animate({"top":"300px"},);
  30.     });
  31.  
  32.     // 练习：设置一个50x50的div，控制在3秒内变成100*400px的div,然后div从上面往下移动100px;
  33.     </script>
  34. </body>
  35. </html>

　　二:动画效果的预设

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7.     <style>
  8.     .box,.box2{
  9.         width: 200px;
  10.         height: 200px;
  11.         background-color: yellow;
  12.     }
  13.     .box2{
  14.         background-color: red;
  15.     }
  16.     </style>
  17. </head>
  18. <body>
  19.     <button id="hide">控制元素的隐藏</button>
  20.     <button id="show">控制元素的显示</button>
  21.     <button id="toggle">判断当前状态，进行隐藏显示</button>
  22.     <button id="up">向上滑动[等同于隐藏这个box]</button>
  23.     <button id="down">向下滑动[等同于显示这个box]</button>
  24.     <button id="in">淡入[等同于显示这个box]</button>
  25.     <button id="out">淡出[等同于隐藏这个box]</button>
  26.     <button id="fade">控制元素的透明度动画</button>
  27.  
  28.     <div class="box"></div>
  29.     <div class="box2"></div>
  30.     <script>
  31.     $("#hide").on("click",function(){
  32.         // 参数1，控制动画的完成时间
  33.         $(".box").hide();
  34.     });
  35.     $("#show").on("click", function(){
  36.         $(".box").show();
  37.     });
  38.     $("#toggle").on("click", function(){
  39.         // 如果原来隐藏，则会自动显示
  40.         // 如果原来显示，则会自动隐藏
  41.         $(".box").stop().toggle();
  42.     });
  43.  
  44.     $("#up").on("click", function(){
  45.        $(".box").stop().slideUp();
  46.     });
  47.  
  48.     $("#down").on("click", function(){
  49.        $(".box").slideDown();
  50.     });
  51.  
  52.     $("#in").on("click", function(){
  53.        $(".box").fadeIn();
  54.     });
  55.  
  56.     $("#out").on("click", function(){
  57.        $(".box").fadeOut();
  58.     });
  59.  
  60.     $("#fade").on("click", function(){
  61.         // 控制元素的透明度
  62.         // 参数1: 整数，动画完成的时间，单位毫秒
  63.         // 参数2: 浮点数，动画完成时，元素的透明度[0为透明，1表示不透明]
  64.        $(".box").fadeTo(,0.5);
  65.     });
  66.  
  67.     </script>
  68. </body>
  69. </html>

　　三:动画效果版本的层级菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>层级菜单</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7.     <script src="js/jquery.color.js"></script><!-- 使用这个插件必须先引入jQuery -->
  8.     <style type="text/css">
  9.         body{
  10.             font-family:'Microsoft Yahei';
  11.         }
  12.         body,ul{
  13.             margin:0px;
  14.             padding:0px;
  15.         }
  16.  
  17.         ul{list-style:none;}
  18.  
  19.         .menu{
  20.             width:200px;
  21.             margin:20px auto ;
  22.         }
  23.  
  24.         .menu .level1,.menu li ul a{
  25.             display:block;
  26.             width:200px;
  27.             height:30px;
  28.             line-height:30px;
  29.             text-decoration:none;
  30.             background-color:#3366cc;
  31.             color:#fff;
  32.             font-size:16px;
  33.             text-indent:10px;
  34.         }
  35.  
  36.         .menu .level1{
  37.             border-bottom:1px solid #afc6f6;
  38.  
  39.         }
  40.  
  41.         .menu li ul a{
  42.             font-size:14px;
  43.             text-indent:20px;
  44.             background-color:#7aa1ef;
  45.  
  46.         }
  47.  
  48.         .menu li ul li{
  49.             border-bottom:1px solid #afc6f6;
  50.         }
  51.  
  52.         .menu li ul{
  53.             display:none;
  54.         }
  55.  
  56.         .menu li ul.current{
  57.             display:block;
  58.         }
  59.  
  60.         /*.menu li ul li a:hover{*/
  61.             /*background-color:#f6b544;*/
  62.         /*}*/
  63.  
  64.     </style>
  65. </head>
  66. <body>
  67.     <ul class="menu">
  68.         <li>
  69.             <a href="#" class="level1">手机</a>
  70.             <ul class="current">
  71.                 <li><a href="#">iPhone X 256G</a></li>
  72.                 <li><a href="#">红米4A 全网通</a></li>
  73.                 <li><a href="#">HUAWEI Mate10</a></li>
  74.                 <li><a href="#">vivo X20A 4GB</a></li>
  75.             </ul>
  76.         </li>
  77.         <li>
  78.             <a href="#" class="level1">笔记本</a>
  79.             <ul>
  80.                 <li><a href="#">MacBook Pro</a></li>
  81.                 <li><a href="#">ThinkPad</a></li>
  82.                 <li><a href="#">外星人(Alienware)</a></li>
  83.                 <li><a href="#">惠普(HP)薄锐ENVY</a></li>
  84.             </ul>
  85.         </li>
  86.         <li>
  87.             <a href="#" class="level1">电视</a>
  88.             <ul>
  89.                 <li><a href="#">海信(hisense)</a></li>
  90.                 <li><a href="#">长虹(CHANGHONG)</a></li>
  91.                 <li><a href="#">TCL彩电L65E5800A</a></li>
  92.             </ul>
  93.         </li>
  94.         <li>
  95.             <a href="#" class="level1">鞋子</a>
  96.             <ul>
  97.                 <li><a href="#">新百伦</a></li>
  98.                 <li><a href="#">adidas</a></li>
  99.                 <li><a href="#">特步</a></li>
  100.                 <li><a href="#">安踏</a></li>
  101.             </ul>
  102.         </li>
  103.         <li>
  104.             <a href="#" class="level1">玩具</a>
  105.             <ul>
  106.                 <li><a href="#">乐高</a></li>
  107.                 <li><a href="#">费雪</a></li>
  108.                 <li><a href="#">铭塔</a></li>
  109.                 <li><a href="#">贝恩斯</a></li>
  110.             </ul>
  111.         </li>
  112.     </ul>
  113.     <script>
  114.     // 思路
  115.     // 用户点击当前一级菜单，则需要显示其二级菜单，同时隐藏其他的一级菜单的子菜单
  116.  
  117.     // 实现代码
  118.     $(".menu .level1").on("click", function(){
  119.         $(".menu .level1").next().slideUp(); // 向上滑动隐藏所有其他的子菜单
  120.         $(this).next().slideDown()  // 显示当前一级菜单的子菜单
  121.     });
  122.  
  123.     $(".menu li ul li a").hover(function(){
  124.         console.log();
  125.         // 默认的jQuery的animate是不支持颜色渐变
  126.         $(this).animate({"background-color":"#f6b544","color":"red"},);
  127.     },function(){
  128.         $(this).animate({"background-color":"#7aa1ef","color":"white"},)
  129.     });
  130.     </script>
  131. </body>
  132. </html>

　　四:事件冒泡的定义

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body onclick="alert('body被点击了')">
  8.     <div class="box" onclick="alert('box被点击了')">
  9.         <p classs="p1" onclick="alert('p1被点击了')">
  10.             <span>一个文本</span>
  11.         </p>
  12.     </div>
  13.     <script>
  14.  
  15.     </script>
  16. </body>
  17. </html>

　　五:阻止事件冒泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body onclick="alert('body被点击了')">
  8.     <div class="box" onclick="alert('box被点击了')">
  9.         <p classs="p1" onclick="alert('p1被点击了')">
  10.             <span id="span">一个文本</span>
  11.         </p>
  12.     </div>
  13.     <script>
  14.     var span = document.getElementById("span");
  15.     span.onclick = function(event){ // event 翻译成中文 就是 "事件"
  16.         console.log( event.target ); // 事件发生以后，浏览器查找到触发地点
  17.         event.stopPropagation(); // 阻止事件冒泡
  18.         // event.cancelBubble = true;  // 如果是IE浏览器，则使用这句阻止事件冒泡
  19.     }
  20.     </script>
  21. </body>
  22. </html>

　　六:事件托管(事件委托)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7. </head>
  8. <body>
  9.     <ul>
  10.         <li class="list"><a href="">商品1</a></li>
  11.         <li class="list"><a href="">商品2</a></li>
  12.         <li class="list"><a href="">商品3</a></li>
  13.         <li class="list"><a href="">商品4</a></li>
  14.         <li class="list"><a href="">商品5</a></li>
  15.         <li class="list"><a href="">商品6</a></li>
  16.         <li class="list"><a href="">商品7</a></li>
  17.         <li class="list"><a href="">商品8</a></li>
  18.     </ul>
  19.     <script>
  20.     // 事件委托，就是让父元素监管子元素的同名事件，从而避免了大量子元素绑定事件的情况
  21.     // 就是把事件绑定到父元素中
  22.     // $("ul li").on("mouseover",function(){
  23.     //     console.log( $(this).html() );
  24.     // });
  25.  
  26.     // 上面分别给大量的子元素绑定事件，效率低
  27.     // 在on方法的事件名称后，绑定当前父元素要托管事件的子元素[选择器]
  28.     $("ul").on("mouseover",".list",function(){
  29.        console.log( $(this).html() );
  30.     });
  31.     </script>
  32. </body>
  33. </html>

　　七:阻止事件的默认行为[针对form 表单]

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7. </head>
  8. <body>
  9.     <a href="" id="link">链接</a>
  10.  
  11.     <form action="">
  12.         账号：<input type="text" name="uname"><span id="uname_tis"></span>
  13.         密码：<input type="password" name="pwd">
  14.         <input type="submit" name="submit" value="提交">
  15.     </form>
  16.  
  17.     <script>
  18.     $("#link").on("click", function(){
  19.        console.log( $(this).html() );
  20.         // 阻止a标签的点击跳转行为
  21.         return false;
  22.     });
  23.  
  24.     // 阻止表单的提交行为
  25.     $("input[name=submit]").on("click", function(){
  26.        // 希望校验数据
  27.        if( $("input[name=uname]").val().length> ){
  28.            $("#uname_tis").html("账号不合法");
  29.            // event.preventDefault();  // vue.js后面会再次出现这个prevent
  30.            return false;
  31.        }
  32.     });
  33.     </script>
  34. </body>
  35. </html>

　　八:案例遮罩层

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.     .login{
  8.         width: 400px;
  9.         height: 280px;
  10.         background: #fff;
  11.         border: 1px solid #aaa;
  12.         position: absolute;
  13.         top:;
  14.         left:;
  15.         right:;
  16.         bottom:;
  17.         margin:auto;
  18.         display: none;
  19.     }
  20.     .opacity{
  21.         display: none;
  22.         background: #;
  23.         position: absolute;
  24.         top:;
  25.         left:;
  26.         right:;
  27.         bottom:;
  28.         margin:auto;
  29.         opacity: 0.3;
  30.     }
  31.     </style>
  32.     <script src="js/jquery-1.12.4.js"></script>
  33.     <script>
  34.     $(function(){
  35.        // 点击登陆显示登陆窗口
  36.         $(".btn").on("click",function(e){ // 事件的匿名函数被调用的时候，系统会在匿名函数这里传递一个参数，就是事件对象
  37.             $(".opacity").show();
  38.             $(".login").show();
  39.              return false; // 方法1，使用return false可以解决事件的冒泡
  40.             // e.stopPropagation(); // 方法2:使用事件对象的stopPropagation()来组织冒泡
  41.         });
  42.  
  43.         $("body").on("click",function(){
  44. //            alert("body标签被点了");
  45.             $(".opacity").hide();
  46.             $(".login").hide();
  47.         });
  48.  
  49.         $(".login").on("click",function(){
  50.             return false; // 阻止事件冒泡
  51.         })
  52.     });
  53.     </script>
  54. </head>
  55. <body>
  56.     <span class="btn">登陆</span>
  57.     <div class="opacity"></div><!-- 遮罩层 -->
  58.     <div class="login">
  59.         <div class="content">登陆窗口</div>
  60.     </div>
  61. </body>
  62. </html>

　　九:dom 操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7. </head>
  8. <body>
  9.     <p class="p1">一个段落</p>
  10. <script>
  11.     // 创建一个标签元素[创建的元素并不会自动显示到html页面中]
  12.     let div = $("<div>一个div</div>")
  13.     console.log( div.html()  );
  14.  
  15.     // 把元素添加页面中指定元素的内部
  16.     //目标元素.appendTo($(父元素))  // 表示给父元素的内部追加目标元素
  17.     // div.appendTo( $("body") );
  18.  
  19.     //目标元素.prependTo($(父元素))  // 表示给父元素的内部前面追加目标元素
  20.     // div.prependTo( $("body") );
  21.  
  22.     // 把元素添加到页面中指定元素的外部
  23.     // 目标元素.insertBefore(位置元素) // 表示给指定位置元素前面加上一个目标元素
  24.     // div.insertBefore($(".p1"))
  25.  
  26.     // 目标元素.insertAfter(位置元素) // 表示给指定位置元素后面加上一个目标元素
  27.     // div.insertAfter( $(".p1") );
  28.  
  29.     // 清空指定的元素内容[还剩下标签本身]
  30.     // $(".p1").empty();
  31.  
  32.     // 删除指定元素[不仅被删除，标签本身也会被删除]
  33.     $(".p1").remove();
  34. </script>
  35. </body>
  36. </html>

　　十:todolist 效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>todolist</title>
  6.     <style type="text/css">
  7.         .list_con{
  8.             width:600px;
  9.             margin:50px auto ;
  10.         }
  11.         .inputtxt{
  12.             width:550px;
  13.             height:30px;
  14.             border:1px solid #ccc;
  15.             padding:0px;
  16.             text-indent:10px;
  17.         }
  18.         .inputbtn{
  19.             width:40px;
  20.             height:32px;
  21.             padding:0px;
  22.             border:1px solid #ccc;
  23.         }
  24.         .list{
  25.             margin:;
  26.             padding:;
  27.             list-style:none;
  28.             margin-top:20px;
  29.         }
  30.         .list li{
  31.             height:40px;
  32.             line-height:40px;
  33.             border-bottom:1px solid #ccc;
  34.         }
  35.  
  36.         .list li span{
  37.             float:left;
  38.         }
  39.  
  40.         .list li a{
  41.             float:right;
  42.             text-decoration:none;
  43.             margin: 10px;
  44.         }
  45.     </style>
  46.     <script src="js/jquery-1.12.4.js"></script>
  47.     <script>
  48.     $(function(){
  49.         // 一,添加计划
  50.         // 步骤:
  51.         //   1. 给"增加"按钮绑定点击事件
  52.         $("#btn1").on("click", function(){
  53.             // 2. 获取文本框的内容
  54. //            console.log( $("#txt1").val() );
  55.             var content = $("#txt1").val();
  56.             // 数据的验证
  57.             if(content == ""){
  58.                 alert("请输入计划的内容");
  59.                 return false;
  60.             }
  61.             // 3. 添加到计划列表
  62.             // 3.1 创建新元素
  63.             var new_li = $('<li><span>'+content+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
  64.             // 3.2 把创建元素添加到计划列表的前面
  65.             $("#list").prepend(new_li);
  66.         });
  67.  
  68.         // 二,移动计划的上下位置
  69.         // 1. 向下移动
  70.         // 在点击".down"按钮以后，把当前行的li元素与下一行的li元素位置互换
  71.         $("#list").on("click",".down",function(){
  72.             // 1.1 获取当前行的li元素
  73.             // $(this) 当前被点击的元素[.down]
  74.             // parent()　获取父级元素
  75.             var current_li = $(this).parent();
  76.             // 1.2 获取下一行的li元素
  77.             var next_li = current_li.next();
  78.             // 1.3 把下一行li的元素放到当前行的前面
  79.             current_li.before(next_li);
  80.         });
  81.  
  82.         // 2. 向上移动
  83.         $("#list").on("click",".up",function(){
  84.                // 2.1 获取当前行的li元素
  85.             var current_li = $(this).parent();
  86.             // 2.2 获取上一行的li元素
  87.             var prev_li = current_li.prev();
  88.             // 2.3 把上一行的li元素当前当前行的后面
  89.             current_li.after(prev_li);
  90.         });
  91.  
  92.         // 三,删除计划
  93.         $("#list").on("click",".del",function(){
  94.             // 删除元素使用remove()
  95.             $(this).parent().remove();
  96.         });
  97.     });
  98.     </script>
  99. </head>
  100. <body>
  101.     <div class="list_con">
  102.         <h2>To do list</h2>
  103.         <input type="text" name="" id="txt1" class="inputtxt">
  104.         <input type="button" name="" value="增加" id="btn1" class="inputbtn">
  105.  
  106.         <ul id="list" class="list">
  107.             <!-- javascript:; # 阻止a标签跳转 -->
  108.             <li>
  109.                 <span>学习html</span>
  110.                 <a href="javascript:;" class="up"> ↑ </a>
  111.                 <a href="javascript:;" class="down"> ↓ </a>
  112.                 <a href="javascript:;" class="del">删除</a>
  113.             </li>
  114.             <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
  115.             <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
  116.         </ul>
  117.     </div>
  118. </body>
  119. </html>

　　  十一:表单验证(正则的使用)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7. </head>
  8. <body>
  9. <form action="">
  10.     账号：<input type="text" name="uname"><br><br>
  11.     密码：<input type="password" name="pwd"><br><br>
  12.     手机号码：<input type="text" name="mobile"><br><br>
  13.     个人网页：<input type="text" name="url"><br><br>
  14.     <input type="submit" value="提交">
  15. </form>
  16. <script>
  17.     // js中正则就是一个对象，默认具有正则操作的方法
  18.     $("input[type=submit]").on("click", function(){
  19.         // 验证帐号数据
  20.         // 1. 账号只能由字母、数字组成,6-10
  21.         let reg = /[a-zA-Z0-]{,}/;
  22.         // console.log( reg );
  23.         // 使用test可以进行正则匹配，返回值是布尔值，true表示验证通过
  24.         result = reg.test( $("input[name=uname]").val() );
  25.         if( !result ){ // 验证没有通过
  26.             return false;//阻止表单提交
  27.         }
  28.  
  29.         // 验证url地址
  30.         let reg2 = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{,})([\/\w \.-]*)*\/?$/;
  31.         result = reg2.test( $("input[name=url]").val() );
  32.         console.log( result );
  33.  
  34.         return false;
  35.     });
  36. </script>
  37. </body>
  38. </html>

 轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  6.     <title>Title</title>
  7.  
  8.     <style>
  9.  
  10.             .outer{
  11.                 width: 590px;
  12.                 height: 470px;
  13.                 margin: 80px auto;
  14.                 position: relative;
  15.             }
  16.  
  17.             .img li{
  18.                  position: absolute;
  19.                  list-style: none;
  20.                  top: ;
  21.                  left: ;
  22.                  display: none;
  23.             }
  24.  
  25.            .num{
  26.                position: absolute;
  27.                bottom: 18px;
  28.                left: 170px;
  29.                list-style: none;
  30.  
  31.            }
  32.  
  33.            .num li{
  34.                display: inline-block;
  35.                width: 18px;
  36.                height: 18px;
  37.                background-color: white;
  38.                border-radius: %;
  39.                text-align: center;
  40.                line-height: 18px;
  41.                margin-left: 14px;
  42.            }
  43.  
  44.            .btn{
  45.                position: absolute;
  46.                top:%;
  47.                width: 30px;
  48.                height: 60px;
  49.                background-color: lightgrey;
  50.                color: white;
  51.  
  52.                text-align: center;
  53.                line-height: 60px;
  54.                font-size: 30px;
  55.                opacity: 0.7;
  56.                margin-top: -30px;
  57.  
  58.                display: none;
  59.  
  60.            }
  61.  
  62.            .left{
  63.                left: ;
  64.            }
  65.  
  66.            .right{
  67.                right: ;
  68.            }
  69.  
  70.           .outer:hover .btn{
  71.               display: block;
  72.           }
  73.  
  74.         .num .active{
  75.             background-color: red;
  76.  
  77.         }
  78.     </style>
  79.  
  80. </head>
  81. <body>
  82.  
  83.       <div class="outer">
  84.           <ul class="img">
  85.               <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
  86.               <li><a href=""><img src="img/2.jpg" alt=""></a></li>
  87.               <li><a href=""><img src="img/3.jpg" alt=""></a></li>
  88.               <li><a href=""><img src="img/4.jpg" alt=""></a></li>
  89.               <li><a href=""><img src="img/5.jpg" alt=""></a></li>
  90.           </ul>
  91.  
  92.           <ul class="num">
  93.               <!--<li class="active"></li>-->
  94.               <!--<li></li>-->
  95.               <!--<li></li>-->
  96.               <!--<li></li>-->
  97.               <!--<li></li>-->
  98.               <!--<li></li>-->
  99.           </ul>
  100.  
  101.           <div class="left  btn"> < </div>
  102.           <div class="right btn"> > </div>
  103.  
  104.       </div>
  105. <script src="jquery-3.1.1.js"></script>
  106. <script>
  107.     var i=;
  108. //  通过jquery自动创建按钮标签
  109.  
  110.     var img_num=$(".img li").length;
  111.  
  112.     for(var j=;j<img_num;j++){
  113.         $(".num").append("<li></li>")
  114.     }
  115.  
  116.     $(".num li").eq().addClass("active");
  117.  
  118. // 手动轮播
  119.  
  120.     $(".num li").mouseover(function () {
  121.         i=$(this).index();
  122.         $(this).addClass("active").siblings().removeClass("active");
  123.  
  124.         $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut()
  125.  
  126.     });
  127.  
  128. // 自动轮播
  129.     var c=setInterval(GO_R,);
  130.  
  131.     function GO_R() {
  132.  
  133.         if(i==img_num-){
  134.             i=-
  135.         }
  136.          i++;
  137.          $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  138.          $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut()
  139.  
  140.     }
  141.  
  142.     function GO_L() {
  143.         if(i==){
  144.             i=img_num
  145.         }
  146.          i--;
  147.          $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  148.          $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut();  // fadeIn,fadeOut单独另开启的线程
  149.  
  150.     }
  151.     $(".outer").hover(function () {
  152.         clearInterval(c)
  153.     },function () {
  154.         c=setInterval(GO_R,)
  155.     });
  156.  
  157. // button 加定播
  158.     $(".right").click(GO_R);
  159.     $(".left").click(GO_L)
  160.  
  161. </script>
  162. </body>
  163. </html>

day 39 jq 学习入门2的更多相关文章

  1. ORMLite学习入门笔记

    ORMLite学习入门笔记 使用原始的SQLiteHelper来操作维护数据库有点过于繁琐,重复工作量较大.所以会想到使用一个比较方便的ORM来维护我们本地的数据库,各位业界前辈都给我推荐了ORMLi ...

  2. OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（下）

    1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...

  3. 给深度学习入门者的Python快速教程

    给深度学习入门者的Python快速教程 基础篇 numpy和Matplotlib篇 本篇部分代码的下载地址: https://github.com/frombeijingwithlove/dlcv_f ...

  4. 深度学习入门者的Python快速教程 - 基础篇

      5.1 Python简介 本章将介绍Python的最基本语法,以及一些和深度学习还有计算机视觉最相关的基本使用. 5.1.1 Python简史 Python是一门解释型的高级编程语言,特点是简单明 ...

  5. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  6. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  7. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  8. 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇

    始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...

  9. UML学习入门就这一篇文章

    1.1 UML基础知识扫盲 UML这三个字母的全称是Unified Modeling Language,直接翻译就是统一建模语言,简单地说就是一种有特殊用途的语言. 你可能会问:这明明是一种图形,为什 ...

随机推荐

  1. 219.01.19 bzoj3252: 攻略（长链剖分+贪心）

    传送门 长链剖分好题. 题意:给一棵带点权的树,可以从根节点到任一叶节点走kkk次,走过的点只能计算一次,问kkk次走过的点点权值和最大值. 思路: 考虑将整棵树带权长链剖分,这样链与链之间是不会重复 ...

  2. vue 开发系列（二） vue ajax 拦截

    概要说明 在开发的过程中,我们需要通过AJAX请求,访问后台获取数据,这个获取数据的时候,当然需要后台需要时登录状态才能访问数据,当没有登录的情况,这个时候我们需要跳转到登录界面进行登录. 如果每次请 ...

  3. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...

  4. Le Chapitre X

    Il se trouvait dans la région des astéroïdes 325, 326, 327, 328, 329 et 330. Il commença donc par le ...

  5. Router pipeline

    from 2013-HPCA-Breaking the On-Chip Latency Barrier Using SMART book_Principles and Practices of Int ...

  6. AngularJS的$location基本用法和注意事项

    一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mo ...

  7. IE上如何设置input type=file的光标不闪烁

    我们使用文件上传时,时常自定义图标,这时候通常会把input的透明度设置为0,但是在IE上使用时会出现光标闪烁问题 解决办法 css设置font-size为0

  8. Ｗeb结构组件

    一.Web结构组件 1.代理 位于客户端和服务器之间的HTTP实体,接收客户端的所有HTTP请求,并将这些请求转发给HTTP服务器. 2.缓存 HTTP的仓库,使常用的页面的副本可以保存在离客户端更近 ...

  9. jmeter 4.0版本更新说明（个人做个记录）总版本更新合集

    版本4.0 摘要 新的和值得注意的 不兼容的变化 Bug修复 改进 非功能性变化 已知问题和解决方法 谢谢 新的和值得注意的 核心改进 JMeter现在支持JAVA 9. 提供新的边界提取器元件,提供 ...

  10. （动态规划）matrix -- hdu -- 5569

    http://acm.hdu.edu.cn/showproblem.php?pid=5569 matrix Time Limit: 6000/3000 MS (Java/Others)    Memo ...