jQuery入门——实现列表的显示隐藏与实现轮播图
列表的显示与隐藏
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>过滤选择器</title> 6 <style type="text/css"> 7 </style> 8 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script> 9 <script type="text/javascript"> 10 $(function() { 11 $(".myclass:visible").hide(); 12 $("a[href='#']").click(function() { 13 if ($(this).text() == "更多") { 14 $(".myclass:hidden").show(); 15 $(this).html("简化"); 16 } else { 17 $(".myclass:visible").hide(); 18 $(this).html("更多"); 19 } 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <ul> 26 <li>联系我们</li> 27 <li>友情链接</li> 28 <li>团队风采</li> 29 <li>个人首页</li> 30 <li class="myclass" style="display: none">更多1</li> 31 <li class="myclass" style="display: none">更多2</li> 32 <li class="myclass" style="display: none">更多3</li> 33 <li>结尾</li> 34 <li><a href="#">更多</a></li> 35 </ul> 36 </body> 37 </html>
轮播图：
html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link rel="stylesheet" href="css/style.css" type="text/css"> 7 <script type="text/javascript" src="js/jquery-3.2.1.js"></script> 8 <script type="text/javascript" src="js/carousel.js"></script> 9 </head> 10 <body> 11 <div class="bigbox"> 12 <ul> 13 <li>1</li> 14 <li>2</li> 15 <li>3</li> 16 <li>4</li> 17 <li>5</li> 18 <li>6</li> 19 </ul> 20 <div class="left"><</div> 21 <div class="right">></div> 22 </div> 23 </body> 24 </html>
css:
1 ul, li { 2 padding: 0; 3 margin: 0; 4 list-style: none; 5 } 6 7 .bigbox { 8 margin: 0 auto; 9 width: 700px; 10 overflow: hidden; 11 height: 454px; 12 position: relative; 13 background: url("../images/adver01.jpg"); 14 } 15 16 ul { 17 position: absolute; 18 bottom: 10px; 19 z-index: 100; 20 width: 100%; 21 text-align: center; 22 } 23 24 ul li { 25 display: inline-block; 26 font-size: 10px; 27 line-height: 20px; 28 font-family: "ST"; 29 margin: 0 1px; 30 width: 20px; 31 height: 20px; 32 border-radius: 50%; 33 background: #333333; 34 text-align: center; 35 color: #ffffff; 36 } 37 38 .left,.right { 39 position: absolute; 40 width: 30px; 41 background: rgba(0, 0, 0, 0.2); 42 height: 50px; 43 line-height: 50px; 44 text-align: center; 45 top: 200px; 46 z-index: 150; 47 font-family: "ST"; 48 font-size: 28px; 49 font-weight: bold; 50 cursor: pointer; 51 display: none; 52 } 53 54 .left { 55 left: 10px; 56 } 57 58 .right { 59 right: 10px; 60 } 61 62 li:nth-of-type(1) { 63 background: orange; 64 }
jQuery:
1 $(document).ready(function(){ 2 var index=0; 3 var img = Array('images/adver01.jpg','images/adver02.jpg','images/adver03.jpg','images/adver04.jpg','images/adver05.jpg','images/adver06.jpg'); 4 var timer; 5 play(); 6 $('.bigbox').mouseover(function(){ 7 $(".left,.right").show(); 8 stop(); 9 }); 10 $('.bigbox').mouseout(function(){ 11 $(".left,.right").hide(); 12 play(); 13 }); 14 $('.right').click(function(){ 15 index++; 16 if(index == img.length){ 17 index = 0; 18 } 19 display(index); 20 }); 21 $('.left').click(function(){ 22 index--; 23 if(index == -1){ 24 index = img.length-1; 25 } 26 display(index); 27 }); 28 function display(index){ 29 $('.bigbox').css('background','url("'+img[index]+'")') 30 $('ul li:eq('+index+')').css('background','orange'); 31 $('ul li:eq('+index+')').siblings().css('background','#333'); 32 } 33 for (var i = 0; i < img.length; i++) { 34 (function(i) { 35 $('ul li:eq('+i+')').click(function(){ 36 index = i; 37 display(index); 38 }); 39 })(i) 40 } 41 function stop(){clearInterval(timer)} 42 function play() {timer = setInterval(function(){ 43 index++; 44 if(index == img.length){ 45 index = 0; 46 } 47 display(index); 48 },2000)} 49 });
