輪播圖代碼

時間 2019-11-09

標籤代碼简体版

原文原文鏈接

1、要點：css

1.頁面加載時，圖片重合，疊在一塊兒[絕對定位];html

2.第一張顯示，其它隱藏;jquery

3.設置下標,給下標設置顏色讓它隨圖片移動;ide

4.鼠標移動到圖片上去，顯示左右移動圖標，鼠標移走，繼續輪播;ui

2、實現代碼：this

html代碼:spa

 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     <link href="css/LunBimg.css" rel="stylesheet" />
 7     <script src="js/jquery-1.10.2.min.js"></script>
 8     <script src="js/LunBimg.js"></script>
 9 </head>
10 <body>
11     <div id="allswapImg">
12         <div class="swapImg"><img src="image/1.jpg" /></div>
13         <div class="swapImg"><img src="image/2.jpg" /></div>
14         <div class="swapImg"><img src="image/3.jpg" /></div>
15         <div class="swapImg"><img src="image/4.jpg" /></div>
16         <div class="swapImg"><img src="image/5.jpg" /></div>
17         <div class="swapImg"><img src="image/6.jpg" /></div>
18     </div>
19     <div class="btn btnLeft"><</div>
20     <div class="btn btnRight">></div>
21     <div id="tabs">
22         <div class="tab bg">1</div>
23         <div class="tab">2</div>
24         <div class="tab">3</div>
25         <div class="tab">4</div>
26         <div class="tab">5</div>
27         <div class="tab">6</div>
28     </div>
29 </body>
30 </html>

css代碼：code

 1 * {
 2   padding:0px;
 3   margin:0px;
 4 }
 5 
 6 .swapImg {
 7    position:absolute;
 8    
 9 }
10 .btn {
11     position:absolute;
12     height:90px;
13     width:60px;
14     background:rgba(0,0,0,0.5);/*設置背景顏色爲黑色，透明度爲50%*/
15     color:#ffffff;
16     text-align:center;
17     line-height:90px;
18     font-size:40px;
19     top:155px;/*圖片高度400/2-45*/
20     cursor:pointer;
21     /*display:none;*/
22 }
23 
24 .btnRight {
25     left:840px;/*圖片寬度900-導航寬度60*/
26 }
27 #tabs {
28     position:absolute;
29     top:370px;
30     margin-left:350px;
31 }
32 .tab {
33    height:20px;
34    width:20px;
35    background:#05e9e2;
36    line-height:20px;
37    text-align:center;
38    font-size:10px;
39    float:left;
40    color:#ffffff;
41    margin-right:10px;
42    border-radius:100%;
43    cursor:pointer;
44 }
45 .bg {
46    background:#00ff21;
47 }

js代碼：xml

 1 /// <reference path="_references.js" />
 2 
 3 var i = 0;//全局變量
 4 //定義一個變量用來獲取輪播的過程
 5 var time;
 6 $(function ()
 7 {
 8     //1.頁面加載後,找到Class等於swapImg的第一個對象，讓它顯示，它的兄弟元素隱藏
 9     $(".swapImg").eq(0).show().siblings().hide();
10     showTime();
11     //當鼠標放到下標上顯示該圖片，鼠標移走繼續輪播
12     $(".tab").hover(
13         function ()
14         {
15             //獲取到當前鼠標所在的下標的索引
16             i = $(this).index();
17             show();
18             //鼠標放上去以後，怎麼中止呢？獲取到變量的過程，清除輪播，把變量傳進去
19             clearInterval(time);
20         }, function ()
21         {
22             showTime();
23         });
24 
25     //要求四，當我點擊左右切換
26     $(".btnLeft").click(function ()
27     {
28         //1.點擊以前要中止輪播
29         clearInterval(time);
30         //點了以後，-1
31         if (i == 0)
32         {
33             i =6;
34         }
35         i--;
36         show();
37         showTime();
38     });
39     $(".btnRight").click(function () {
40         //1.點擊以前要中止輪播
41         clearInterval(time);
42         //點了以後，-1
43         if (i == 5) {
44             i = -1;
45         }
46         i++;
47         show();
48         showTime();
49     });
50    
51 
52 });
53 
54 function show() {
55     //$("#allswapImg").hover(function ()
56     //{
57     //    $(".btn").show();
58     //}, function ()
59     //{
60     //    $(".btn").hide();
61     //});
62     //fadeIn(300)淡入，fadeout(300)淡出，過濾時間0.3s
63     $(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
64     $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
65 }
66 
67 function showTime()
68 {
69     time = setInterval(function () {
70         i++;
71         if (i == 6) {
72             //只有6張圖片，因此i不能超過6，若是i等於6時，咱們就讓它等於第一張
73             i = 0;
74         }
75         show();
76     }, 3000);
77 }

相關標籤/搜索

每日一句

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