jQuery作的自定義選項卡

時間 2019-12-06

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。