jQuery做的自定义选项卡
HTML代码：图片可以随便找几张加上去
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="test_4.css"/> 7 8 </head> 9 <body> 10 <div class="container"> 11 <img src="img/p1.jpg" class="active"/> 12 <img src="img/p2.jpg"/> 13 <img src="img/p3.jpg"/> 14 <img src="img/p4.jpg"/> 15 <img src="img/p5.jpg"/> 16 <img src="img/p6.jpg"/> 17 <img src="img/p7.jpg"/> 18 <input type="button" class="prev" value="" /> 19 <input type="button" class="next" value="" /> 20 <ul> 21 <li><a class="ball checked"></a></li> 22 <li><a class="ball"></a></li> 23 <li><a class="ball"></a></li> 24 <li><a class="ball"></a></li> 25 <li><a class="ball"></a></li> 26 <li><a class="ball"></a></li> 27 <li><a class="ball"></a></li> 28 </ul> 29 </div> 30 <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> 31 <script src="test_4.js" type="text/javascript" charset="utf-8"></script> 32 </body> 33 </html>
css样式表：
1 .container{ 2 width: 1226px; 3 height: 460px; 4 position: relative; 5 } 6 .container img{ 7 position: absolute; 8 left: 0; 9 top: 0; 10 display: none; 11 } 12 13 .prev{ 14 width: 41px; 15 height: 69px; 16 border: none; 17 background-image: url(img/icon-slides.png); 18 position: absolute; 19 background-position: -84px 50%; 20 left: 0; 21 top: 196px; 22 background-color: rgba(0,0,0,0); 23 outline: none; 24 cursor: pointer; 25 } 26 .prev:hover{ 27 background-position: -0px 50%; 28 cursor: pointer; 29 } 30 .container .active{ 31 display: block; 32 } 33 .next{ 34 width: 41px; 35 height: 69px; 36 border: none; 37 background-image: url(img/icon-slides.png); 38 position: absolute; 39 top: 196px; 40 right: 0; 41 background-position: -125px 50%; 42 background-color: rgba(0,0,0,0); 43 outline: none; 44 cursor: pointer; 45 } 46 .next:hover{ 47 background-position: -42px 50%; 48 cursor: pointer; 49 } 50 .ball{ 51 display: block; 52 width: 6px; 53 height: 6px; 54 background-color: rgba(0,0,0,0.4); 55 border: 2px solid rgba(255,255,255,0.3); 56 border-radius: 100%; 57 margin: 0 4px; 58 cursor: pointer; 59 } 60 ul{ 61 list-style: none; 62 padding: 0; 63 margin: 0; 64 position: absolute; 65 right: 50px; 66 bottom: 20px; 67 } 68 ul li{ 69 float: left; 70 } 71 .checked{ 72 background-color: rgba(255,255,255,0.4); 73 background-clip: padding-box; 74 border-color: rgba(0,0,0,0.3); 75 }
jQuery代码：
1 $(function(){ 2 //向后切换 3 $(".next").click(function(){ 4 //查找当前元素 5 var current=$(".active"); 6 //只查找身后img标签改变样式 7 var next =current.next("img"); 8 if(next.length==0){//判断找没找到不能用null,用length==0 9 next=$(".container img:first-child"); 10 } 11 //当前元素隐藏 12 current.fadeOut(function(){ 13 current.removeClass("active"); 14 15 }); 16 //下一个 元素隐藏 17 next.fadeIn(function(){ 18 next.addClass("active") 19 }); 20 var i =$("img").index(next) 21 $("ul a").removeClass("checked"); 22 $("ul li:eq("+i+") a").addClass("checked"); 23 24 }); 25 //向前切换 26 $(".prev").click(function(){ 27 //查找当前元素 28 var current=$(".active"); 29 //只查找身后img标签改变样式 30 var prev =current.prev("img"); 31 if(prev.length==0){//判断找没找到不能用null,用length==0 32 prev=$(".container img:last-of-type"); 33 } 34 //当前元素隐藏 35 current.fadeOut(function(){ 36 current.removeClass("active"); 37 38 }); 39 //下一个 元素隐藏 40 prev.fadeIn(function(){ 41 prev.addClass("active") 42 }); 43 }); 44 45 $(".ball").click(function(){ 46 var i=$("ul li").index($(this).parent()); 47 if($(this).hasClass("checked")){ 48 return; 49 } 50 $(".active").fadeOut(function(){ 51 $(this).removeClass("active"); 52 }) 53 $("img").eq(i).fadeIn(function(){ 54 $(this).addClass("active"); 55 }); 56 $(".checked").removeClass("checked"); 57 $(this).addClass("checked"); 58 }); 59 60 }); 61 $(".next").oneTime("1s",function(){ 62 63 });