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"/> 78</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{ 2width: 1226px; 3height: 460px; 4position: relative; 5 } 6 .container img{ 7position: absolute; 8left: 0; 9top: 0;10display: none;11 }12 13 .prev{14width: 41px;15height: 69px;16border: none;17background-image: url(img/icon-slides.png);18position: absolute;19background-position: -84px 50%;20left: 0;21top: 196px;22background-color: rgba(0,0,0,0);23outline: none;24cursor: pointer;25 }26 .prev:hover{27background-position: -0px 50%;28cursor: pointer;29 }30 .container .active{31display: block;32 }33 .next{34width: 41px;35height: 69px;36border: none;37background-image: url(img/icon-slides.png);38position: absolute;39top: 196px;40right: 0;41background-position: -125px 50%;42background-color: rgba(0,0,0,0);43outline: none;44cursor: pointer;45 }46 .next:hover{47background-position: -42px 50%;48cursor: pointer;49 }50 .ball{51display: block;52width: 6px;53height: 6px;54background-color: rgba(0,0,0,0.4);55border: 2px solid rgba(255,255,255,0.3);56border-radius: 100%;57margin: 0 4px;58cursor: pointer;59 }60 ul{61list-style: none;62padding: 0;63margin: 0;64position: absolute;65right: 50px;66bottom: 20px;67 }68 ul li{69float: left;70 }71 .checked{72background-color: rgba(255,255,255,0.4);73background-clip: padding-box;74border-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==032 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});4445$(".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});5960 });61 $(".next").oneTime("1s",function(){6263 });
