輪播是html頁面中比較常見的一種展現形式，也是基礎，把輪播圖做好，是排版中比較關鍵的
1.首先是輪播的html元素放置；做輪播之前，要有一個初步的認識
2.每個元素的位置怎樣擺放，也是很關鍵的，這里所說的布局
3.js輪播的動態展現過程
做好以上三步，輪播基本上就出來的
首先 .html代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <link rel="stylesheet" href="./css/wufenstyle.css"> 8 <script src="./js/jquery.js"></script> 9 <script src="./js/wufeng.js"></script> 10 </head> 11 <body> 12 <div class="showbox"> 13 <div class="imgbox"> 14 <img src="./img/porsche-normal5.jpg"> 15 <img src="./img/porsche-normal1.jpg"> 16 <img src="./img/porsche-normal2.jpg"> 17 <img src="./img/porsche-normal3.jpg"> 18 <img src="./img/porsche-normal4.jpg"> 19 <img src="./img/porsche-normal5.jpg"> 20 <img src="./img/porsche-normal1.jpg"> 21 </div> 22 <div class="pre" > 23 <span></span> 24 </div> 25 <div class="aft" > 26 <span></span> 27 </div> 28 <ul class="odot"> 29 <ul class="lis"> 30 <li class="active"></li> 31 <li class="changtai"></li> 32 <li class="changtai"></li> 33 <li class="changtai"></li> 34 <li class="changtai"></li> 35 </ul> 36 </ul> 37 </div> 38 </body> 39 </html>
然后是 .css 頁面布局
1 *{ 2 margin:0; 3 padding:0; 4 } 5 img{ 6 margin:0; 7 padding:0; 8 } 9 li{ 10 list-style-type: none; 11 } 12 .active{ 13 background:url('../img/active.png') no-repeat 0 0; 14 } 15 .changtai{ 16 background:url('../img/none.png') no-repeat 0 0; 17 } 18 div.showbox{ 19 position:relative; 20 width:100%; 21 height:800px; 22 overflow: hidden; 23 } 24 div.imgbox{ 25 position:absolute; 26 width:200000px; 27 height:100%; 28 left:0; 29 } 30 div.imgbox img{ 31 height:100%; 32 position: relative; 33 float:left; 34 } 35 div.showbox div.pre{ 36 position: relative; 37 float:left; 38 width:60px; 39 height:100%; 40 } 41 div.showbox div.pre span{ 42 position: absolute; 43 left:0; 44 right:0; 45 top:0; 46 bottom: 0; 47 margin:auto; 48 width:40px; 49 height:60px; 50 background: url('../img/toleft01.png') no-repeat 0 0; 51 cursor:pointer; 52 cursor:hand; 53 } 54 div.showbox div.aft{ 55 position: relative; 56 float:right; 57 width:60px; 58 height:100%; 59 } 60 div.showbox div.aft span{ 61 position: absolute; 62 left:0; 63 right:0; 64 top:0; 65 bottom: 0; 66 margin:auto; 67 width:40px; 68 height:60px; 69 background: url('../img/toright01.png') no-repeat 0 0; 70 cursor:pointer; 71 cursor:hand; 72 } 73 div.showbox ul.odot{ 74 position: absolute; 75 width:100%; 76 height:100px; 77 bottom: 15px; 78 } 79 div.showbox ul.odot ul.lis{ 80 position: absolute; 81 left:0; 82 right:0; 83 top:0; 84 bottom: 0; 85 margin:auto; 86 width:200px; 87 height:30px; 88 } 89 div.showbox ul.odot ul.lis li{ 90 display: inline-block; 91 width:15px; 92 height:15px; 93 margin:5px; 94 cursor:pointer; 95 cursor:hand; 96 }
最后是 .js代碼：
1 $(function(){ 2 var O_showbox = $('div.showbox'); 3 var O_imgbox = $('div.showbox div.imgbox'); 4 var O_imgs = $('div.showbox div.imgbox img'); 5 var O_pre = $('div.showbox div.pre'); 6 var O_aft = $('div.showbox div.aft'); 7 var O_lis = $('div.showbox ul.odot ul.lis li'); 8 var timer = null; 9 var O_index = 1; 10 var oshow_width = O_showbox.width(); 11 var O_imgs_len = O_imgs.length; 12 O_imgs.each(function(){ 13 $(this).css('width',oshow_width+'px'); 14 }); 15 O_imgbox.css('width',oshow_width*O_imgs_len +'px'); 16 17 O_imgbox.css('left','-' + oshow_width + 'px'); 18 O_aft.on('click',function(){ 19 O_index++; 20 var target_left = -O_index*oshow_width; 21 O_imgbox.stop(false,true).animate({'left':target_left+'px'},function(){ 22 if(O_index >= O_imgs_len-1){ 23 O_index=1; 24 O_imgbox.css('left','-' + oshow_width + 'px'); 25 }; 26 O_lis.removeClass('active').removeClass('changtai'); 27 O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai'); 28 }); 29 }); 30 O_pre.on('click',function(){ 31 O_index--; 32 var target_left = -O_index*oshow_width; 33 O_imgbox.stop(false,true).animate({'left':target_left+'px'},function(){ 34 if(O_index <= 0 ){ 35 O_index=O_imgs_len-2; 36 O_imgbox.css('left','-' + oshow_width*O_index + 'px'); 37 }; 38 O_lis.removeClass('active').removeClass('changtai'); 39 O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai'); 40 }); 41 }); 42 function aoto_play(){ 43 timer = setInterval(function(){ 44 O_aft.click(); 45 },1500) 46 }; 47 aoto_play(); 48 O_lis.on('click',function(){ 49 var index= $(this).index(); 50 O_index =index + 1; 51 var target_left = -O_index*oshow_width; 52 O_imgbox.stop(false,true).animate({'left':target_left+'px'}); 53 O_lis.removeClass('active').removeClass('changtai'); 54 O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai'); 55 }); 56 O_showbox.hover(function(){ 57 clearInterval(timer); 58 },function(){ 59 aoto_play(); 60 }); 61 62 // 自適應 63 var Oz_width = 1903; //初始狀態的寬度 64 var Oz_height = 800; //初始狀態的高度 65 var Oz_ratio = Oz_height/Oz_width ; // 自適應高寬比率 66 67 function zishiying(){ 68 var curwidth = $(document.body).width() ; 69 //初始化 70 // 設定顯示divbox的寬為視窗寬度，高度為寬度按比例縮放 71 O_showbox.width( curwidth+'px'); 72 O_showbox.height( parseInt(curwidth*Oz_ratio) + 'px' ); 73 //設置圖片的高度和寬度 74 O_imgs.each(function(){ 75 $(this).css('width',oshow_width+'px'); 76 $(this).css('height',parseInt(curwidth*Oz_ratio) + 'px' ); 77 }); 78 // 設定imgbox的高度和寬度 79 O_imgbox.css('width',curwidth*O_imgs_len +'px'); 80 O_imgbox.css('height',parseInt(curwidth*Oz_ratio) + 'px' ); 81 82 } 83 zishiying(); 84 $(window).resize(function(){ 85 zishiying(); 86 // window.location.reload(); 87 }); 88 });
以上三個部分完成，輪播就OK了；
下面對代碼進行說明：html和css部分就略過了，說一下js的部分
1. 首先：獲取元素及初始化數據
2. 寫點擊事件：點擊展示下一頁和上一頁，這里主要是和索引相關，下一頁則索引自加，上一頁則索引自減；
利用animate的移動規則，先移動，然后判斷索引；確認是否已經到最后一頁，或者第一頁
因為我們做的是無縫輪播，圖片放置時第一頁和最后一頁是重復的，這樣做一個判斷，並作出相應的處理，使圖片移動時，看起來是一種無縫狀態
3. 設定自動播放和小點點擊事件，輪播停止和重新開始事件
4.設定輪播圖片的自適應：
綜合：
基本上可以實現輪播自適應，但是有一個問題，就是在圖片輪播進時，改變瀏覽器的大小時，不太匹配，有時候會把圖片顯示不全，或者顯示第一張圖片的一般，另一張圖片的一部分；
如以上第4點，在$(window).resize()事件中加入window.location.reload() 刷新時，顯示不全的問題得到解決了，但是刷新時，會出現空白閃動，這給人的體驗不太好
總結一下：除了自適應有問題外，輪播基本上實現了
自適應的問題暫時還不知道怎樣解決，歡迎各位看到后留言，告訴我自適應的方法
附：后記：11/11 再次測試時：
把自適應中，var curwidth 改成 oshow_width, 相應的curwidth全部換成oshow_width;(此改變是為了同步，覺得沒有必要多設一個參數)；
測試時，輪播圖片在窗口改變過程中，還是有顯示不全的現象（即只顯示一張圖片的一部分，另一張圖片的另一部分），但是再切換到下一頁或者自動輪播到下一頁時，恢復正常了；
末尾也出現空白界面的現象也沒有再出現
----雖然解決了一些問題，但是還是沒有找到問題的根因，疑惑中...............
效果圖如下：
