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 });
