一、要點： 1.頁面載入時，圖片重合，疊在一起[絕對定位]; 2.第一張顯示，其它隱藏; 3.設置下標,給下標設置顏色讓它隨圖片移動; 4.滑鼠移動到圖片上去，顯示左右移動圖標，滑鼠移走，繼續輪播; 二、實現代碼： html代碼: css代碼： js代碼： ...
一、要點：
1.頁面載入時，圖片重合，疊在一起[絕對定位];
2.第一張顯示，其它隱藏;
3.設置下標,給下標設置顏色讓它隨圖片移動;
4.滑鼠移動到圖片上去，顯示左右移動圖標，滑鼠移走，繼續輪播;
二、實現代碼：
html代碼:
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代碼：
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代碼：
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 }
