jquery
一.寻找元素(选择器和筛选器)
a.选择器
1.基本选择器
1 | $( "*" ) $( "#id" ) $( ".class" ) $( "element" ) $( ".class,p,div" ) |
2.层级选择器
1 | $( ".outer div" ) $( ".outer>div" ) $( ".outer+div" ) $( ".outer~div" ) |
3.基本筛选器
1 | $( "li:first" ) $( "li:eq(2)" ) $( "li:even" ) $( "li:gt(1)" ) |
4.属性选择器
1 | $( '[id="div1"]' ) $( '["alex="sb"][id]' ) |
5.表单选择器
1 2 | $( "[type='text']" ) - - - - - >$( ":text" ) #注意只适用于input标签 : $("input:checked") |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script src="jquery-3.2.1.js"></script>
<script>
$("li").css("color","red"); #数组
$("li:first").css("color","red"); #第一个
$("li:last").css("color","red"); #第二个
$("li:eq(2)").css("color","red"); #查找索引
$("li:even").css("color","red"); #基数行
$("li:odd").css("color","red"); #偶数行
$("li:gt(1)").css("color","red"); #大于某个数
$("li:lt(2)").css("color","red"); #小于某个数
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p alex="sb">1111</p>
<p alex="sb">1111</p>
<p alex="sb" id="p4">1111</p>
<script src="jquery-3.2.1.js"></script>
<script>
$("[alex]").css("color","red") #都变红
$("[alex='sb']").css("color","red") #都变红
$("[alex='sb'][id='p4']").css("color","red") #最后一个变红
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.2.1.js"></script>
<script>
$("[type='text']").css("width","300px");
$(":text").css("width","300px"); #简写
</script>
</body>
</html>
b.筛选器
1.过滤筛选器
1 | $( "li" ).eq( 2 ) $( "li" ).first() $( "ul li" ).hasclass( "test" ) |
2.查找筛选器
1 2 3 4 5 6 7 8 9 | $( "div" ).children( ".test" ) $( "div" ).find( ".test" ) $( ".test" ). next () $( ".test" ).nextAll() $( ".test" ).nextUntil() $( "div" ).prev() $( "div" ).prevAll() $( "div" ).prevUntil() $( ".test" ).parent() $( ".test" ).parents() $( ".test" ).parentUntil() $( "div" ).siblings() |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; width: 30%; background-color: gainsboro; float: left; } .content{ height: 500px; width: 70%; background-color: rebeccapurple; float: left; } .title{ line-height: 50px; background-color: #425a66; color: forestgreen; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick=show(this);>菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick=show(this);>菜单二</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick=show(this);>菜单三</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> </div> <div class="content"></div> </div> <script src="jquery-3.2.1.js"></script> <script> function show(self){ $(self).next().removeClass("hide"); $(self).parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="selectall();">全选</button> <button onclick="cancel();">取消</button> <button onclick="reverse();">反选</button> <table border="1" id="Table"> <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> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> <script src="jquery-3.2.1.js"></script> <script> function selectall() { $(":checkbox").each(function () { $(this).prop("checked", true) }) } function cancel() { $(":checkbox").each(function () { $(this).prop("checked", false) }) } function reverse() { $(":checkbox").each(function () { if($(this).prop("checked")){ $(this).prop("checked",false) } else { $(this).prop("checked",true) } }) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: coral; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action1(this)"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action2(this)"> </div> <script src="jquery-3.2.1.js"></script> <script> function action1(self){ $(self).parent().siblings().removeClass("hide"); } function action2(self){ $(self).parent().addClass("hide").prev().addClass("hide") } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer{ width: 80%; margin: 20px auto; } .nav li{ list-style: none; float: left; width: 33.2%; height: 40px; background-color: wheat; text-align:center; line-height: 40px; border-right: solid 1px green; } .nav:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size:0; } .content{ width: 100%; height: 400px; background-color: yellowgreen; } ul .active{ background-color: #204982; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <ul class="nav"> <li xxx="con1" class="active" onclick="tab(this)">菜单一</li> <li xxx="con2" onclick="tab(this)">菜单二</li> <li xxx="con3"onclick="tab(this)">菜单三</li> </ul> <div class="content"> <div class="con1">111</div> <div class="con2 hide">222</div> <div class="con3 hide">333</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function tab(self) { var index=$(self).attr("xxx"); $("."+index).removeClass("hide").siblings().addClass("hide") $(self).addClass("active").siblings().removeClass("active") } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="c1"> <p>ppp</p> </div> <button>button</button> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function () { $("p").empty() }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="outer"> <div class="iterm"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function add(self) { var $clone_obj=$(self).parent().clone(); $clone_obj.children("button").text("-"); $clone_obj.children("button").attr("onclick","remove_obj(this)"); $(".outer").append($clone_obj); } function remove_obj(self) { $(self).parent().remove() } </script> </body> </html>
二.操作元素(属性,css,文档处理)
a.属性操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #--------------------------属性 $("").attr(); #新建属性 查看属性 修改属性 自己定义的属性 $("").removeAttr(); $("").prop(); #固有的属性 $("").removeProp(); #--------------------------CSS类 $("").addClass( class |fn) $("").removeClass([ class |fn]) #--------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) #取固有属性,input标签 #--------------------------- $(" ").css(" color "," red") |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div1" con="c1"></div>
<script src="jquery-3.2.1.js"></script>
<script>
console.log($("div").attr("con")) #查看属性的值
$("div").attr("con","c2") #修改属性
$("div").attr("alex","c2") #新建属性
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox" >是否可见
<script src="jquery-3.2.1.js"></script>
<script>
console.log($(":checkbox:first").prop("checked"))
console.log($(":checkbox:last").prop("checked"))
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="id1">
<p>1111</p>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
console.log($("#id1").html()); #查找
console.log($("#id1").text()); #查找
$("#id1").html("<h2>hello word</h2>") #赋值
</script>
</body>
</html>
b.文档处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | / / 创建一个标签对象 $( "<p>" ) / / 内部插入 $(" ").append(content|fn) ----->$(" p ").append(" <b>Hello< / b>"); $(" ").appendTo(content) ----->$(" p ").appendTo(" div"); $(" ").prepend(content|fn) ----->$(" p ").prepend(" <b>Hello< / b>"); $(" ").prependTo(content) ----->$(" p ").prependTo(" #foo"); / / 外部插入 $(" ").after(content|fn) ----->$(" p ").after(" <b>Hello< / b>"); #自己插兄弟 $(" ").before(content|fn) ----->$(" p ").before(" <b>Hello< / b>"); $(" ").insertAfter(content) ----->$(" p ").insertAfter(" #foo"); #兄弟插自己 $(" ").insertBefore(content) ----->$(" p ").insertBefore(" #foo"); / / 替换 $(" ").replaceWith(content|fn) ----->$(" p ").replaceWith(" <b>Paragraph. < / b>"); / / 删除 $("").empty() #标签还在,内容清空 $("").remove([expr]) #标签和内容都清空 / / 复制 $("").clone([Even[,deepEven]]) |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="c1"> <p>ppp</p> </div> <button>add</button> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function () { var $ele=$("<h1></h1>"); $ele.html("hello word"); $ele.css("color","red"); // $(".c1").append($ele); #父亲增加儿子 $ele.appendTo(".c1") ; #儿子增加父亲 }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="c1"> <p>ppp</p> </div> <button>add</button> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function () { var $ele=$("<h1></h1>"); $ele.html("hello word"); $ele.css("color","red"); $("p").replaceWith($ele); }) </script> </body> </html>
c. css操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #CSS $("").css(name|pro|[,val|fn]) # 位置 $("").offset([coordinates]) #相对于视口的偏移量 $("").position() #相对于已经定位的父标签的偏移量 $("").scrollTop([val]) $("").scrollLeft([val]) # 尺寸 $("").height([val|fn]) #高 $("").width([val|fn]) $("").innerHeight() #加上内边距高 $("").innerWidth() $("").outerHeight([soptions]) #内容+内边距+boder +True参数,就加上了margin $("").outerWidth([options]) |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 200px; height: 200px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <script src="jquery-3.2.1.js"></script> <script> console.log($(".div2").offset().top) console.log($(".div2").offset().left) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 200px; height: 200px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } /*.outer{*/ /*position: relative;*/ /*}*/ </style> </head> <body> <div class="div1"></div> <div class="outer"> <div class="div2"></div> </div> <script src="jquery-3.2.1.js"></script> <script> console.log($(".div1").position().top); console.log($(".div1").position().left); console.log($(".div2").position().top); console.log($(".div2").position().left); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 200px; height: 100px; } .div1{ background-color: #84a42b; border: 3px solid blue; padding: 20px; margin: 1px; } .div2{ background-color: red; } </style> </head> <body> <div class="div1"></div> <div class="outer"> <div class="div2"></div> </div> <script src="jquery-3.2.1.js"></script> <script> console.log($(".div1").height()); console.log($(".div1").innerHeight()); console.log($(".div1").outerHeight(true)); </script> </body> </html>
三. 循环
a.方式一
1 2 3 4 5 6 7 8 9 10 | <script> arrs = [ 11 , 22 , 33 ]; arrs = { "name" : "egon" , "age" : 18 } $.each(arrs,function (i,j) { console.log(i); console.log(j); }) < / script> |
b.方式二
1 2 3 4 5 6 7 8 9 10 11 12 13 | <p> 111 < / p> <p> 222 < / p> <p> 333 < / p> <script src = "jquery-3.2.1.js" >< / script> <script> $( "p" ).each(function () { $(this).html( "hello" ) }) < / script> |
四. 事件
1 2 3 4 5 | # 事件绑定 bind unbind |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 100%; height: 800px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: cyan; color: white; text-align: center; line-height: 50px; } .returnTop{ display: none; } </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>555</li> </ul> <buton>add</buton> <script src="jquery-3.2.1.js"></script> <script> // $("ul li").click(function () { // alert("123") // }) $("ul li").bind("click",function () { #绑定事件 alert(123) }); $("ul li").unbind("click") #解除绑定 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <button>add</button> <button class="off_p">off</button> <script src="jquery-3.2.1.js"></script> <script> $(".off_p").click(function(){ $("ul").off(); // 解除所有事件 }); $("button:first").click(function(){ $("ul").append("<li>222</li>")}); $("ul").on("click","li",function(){ alert(100) }) </script> </body> </html>
五.动画效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | hide() #显示 show() #隐藏 toggle() #切换 slideDown() #滑入 slideUp() #滑出 slideToggle() #切换 fadeIn() #淡入 fadeOut() #淡出 fadeToggle() #切换 fadeTo( 1000 , 0.4 ) #透明度 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>hello</div> <button onclick="f1()">显示</button> <button onclick="f2()">隐藏</button> <button onclick="f3()">切换</button> <script src="jquery-3.2.1.js"></script> <script> function f1() { $("div").show(1000) } function f2() { $("div").hide(1000) } function f3() { $("div").toggle(1000) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); $("#slideUp").click(function(){ $("#content").slideUp(1000); }); $("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #content{ text-align: center; background-color: darkgrey; border: solid 1px blueviolet; padding: 50px; } </style> </head> <body> <div id="slideDown">出现</div> <div id="slideUp">隐藏</div> <div id="slideToggle">toggle</div> <div id="content">hello word</div> <script src="jquery-3.2.1.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(2000); }); $("#out").click(function(){ $("#id1").fadeOut(2000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(2000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script> </head> <body> <button id="in">fadein</button> <button id="out">fadeout</button> <button id="toggle">fadetoggle</button> <button id="fadeto">fadeto</button> <div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> </head> <body> <button>hide</button> <p>helloworld helloworld helloworld</p> <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }) </script> </body> </html>
六. 扩展方法 (插件机制)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> $.extend( object ) / / 为JQuery 添加一个静态方法。 $.fn.extend( object ) / / 为JQuery实例添加一个方法。 jQuery.extend({ min : function(a, b) { return a < b ? a : b; }, max : function(a, b) { return a > b ? a : b; } }); console.log($. min ( 3 , 4 )); / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - $.fn.extend({ "print" :function(){ for (var i = 0 ;i<this.length;i + + ){ console.log($(this)[i].innerHTML) } } }); $( "p" ). print (); < / script> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>111</p> <p>222</p> <p>333</p> <script src="jquery-3.2.1.js"></script> <script> 方式一: $.extend({ Myprint:function () { console.log("hello word") } }); $.Myprint() 方式二: $.fn.extend({ GetText: function () { for (var i = 0; i < this.length; i++) { console.log($(this).text()); } } }); $("p").GetText(); </script> </body> </html>
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 100%; height: 800px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: cyan; color: white; text-align: center; line-height: 50px; } .returnTop{ display: none; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="returnTop">返回顶部</div> <script src="jquery-3.2.1.js"></script> <script> $(".returnTop").click(function () { $(window).scrollTop(0); }); window.onscroll=function () { if ($(window).scrollTop()>200){ $(".returnTop").show(); } else{ $(".returnTop").hide(); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ width: 790px; height: 340px; margin: 20px auto; border: 1px darkgreen solid; position: relative; } ul.img{ list-style: none; } ul.img li{ position: absolute; top:0; left: 0; display: none; } .icon{ position: absolute; bottom: 20px;; left: 220px;; list-style: none; } .icon li{ display: inline-block; width: 30px; height: 30px; background-color: gray; text-align: center; line-height: 30px; color: white; border-radius: 100%; margin-left: 14px; } .btn{ position: absolute; top: 50%; width: 60px; height: 80px; background-color: grey; font-size: 40px; text-align: center; line-height: 80px; opacity: 0.7; margin-top: -40px; color: white; } .left{ left: 0; } .right{ right: 0; } .icon .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="icon"> <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.2.1.js"></script> <script> var i=0; // 自动轮播: function move_right(){ if(i==5){ i=-1 } i++; // i=2 console.log(i); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); } function move_left(){ if(i==0){ i=6 } i--; console.log(i); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800); } var ID=setInterval(move_right,1000); // 手动轮播 $(".outer").hover(function(){ clearInterval(ID) },function(){ ID=setInterval(move_right,1000) }); $(".icon li").mouseover(function(){ i=$(this).index(); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); }); // click事件 $(".right").click(move_right); $(".left").click(move_left); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;color: white;"> 标题 </div> <div style="height: 300px;"> 内容 </div> </div> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script> $(function(){ // 页面加载完成之后自动执行 $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; // 原始鼠标横纵坐标位置 var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer{ width: 790px; height: 340px; margin: 20px auto; border: 1px darkgreen solid; position: relative; } ul.img{ list-style: none; } ul.img li{ position: absolute; top: 0; left: 0; display: none; } .icon{ position: absolute; list-style: none; bottom: 20px; left: 220px; /*display: none;*/ /*background-color: rebeccapurple;*/ } .icon li{ display: inline-block; width: 30px; height: 30px; background-color: gray; text-align: center; line-height: 30px; color: white; border-radius:100%; margin-left: 14px; } .btn{ position: absolute; top: 50%; width: 60px; height: 80px; background-color: #84a42b; font-size: 40px; text-align: center; line-height: 80px; opacity: 0.7; margin-top: -40px; color: white; } .show_hide{ display: none; } .left{ left:0; } .right{ right: 0; } .icon .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="icon"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="show_hide"> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> var i=0; function move_right() { if (i==5){ i = -1; } i++; $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); } function move_left(){ if(i==0){ i=6 } i--; console.log(i); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800); } var ID=setInterval(move_right,1000); $(".outer").hover(function () { $(".show_hide").show(); clearInterval(ID) },function () { $(".show_hide").hide(); ID=setInterval(move_right,1000) }); $(".icon li").mousemove(function () { i=$(this).index(); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); }) $(".right").click(move_right); $(".left").click(move_left); </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥