1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> 3 <head> 4 <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> 5 <title> 帶數字導航的橫幅效果 </title> 6 <style type="text/css"> 7 8 /* 通用選擇器，設定無內外邊距，無邊框等……邊框的去除在圖片按鈕時特別有用 */ 9 *{ 10 margin:0px; 11 padding:0px; 12 border:0px; 13 } 14 15 /* 為數字導航廣告層設置樣式，值得一提的是，不管在什么地方設置寬度都是必要的，忘記了會出問題的 16 * 使用了margin:0 auto;來造成居中效果。 17 */ 18 #add_pic_nav{ 19 height: 224px; 20 width: 426px; 21 background-image: url(images/adRotator_1.jpg); 22 margin:0 auto; 23 } 24 25 /* 這里設置數字廣告導航層內無需列表的的樣式，我這里用了可能不是很好的做法，使用內邊距將數字‘頂’下來的。寬度我設置了自動，可能也有問題 */ 26 #add_pic_nav ul:first-child{padding-top:204px;width:auto;} 27 28 /* 這里設置列表項的樣式，那么我為了使界面更加友好，做了一些處理，列表樣式中的編號清除可以放在標簽選擇器（類型選擇器）中 */ 29 #add_pic_nav ul:first-child li{ 30 list-style:none; 31 color: #FFF; 32 background-color: #9E2E07; 33 width:18px; 34 height:18px; 35 margin-left:10px; 36 cursor:pointer; 37 float:left; 38 text-align:center} 39 40 /* 改變第一個數字前的左外邊距，造成對稱效果 */ 41 #add_pic_nav ul:first-child li:first-child{margin-left:18px} 42 43 /* 清除非數字項浮動，這里的主要母的是清除最后一個數字后的浮動 */ 44 ul:first-child :not(li){clear:both} 45 46 /* 被激活顯示的頁面，當前顯示的廣告圖片和介紹 */ 47 #add_pic_nav ul li[class~="active"]{ 48 list-style:none; 49 color:#8C2806; 50 font-size:14px; 51 width:280px; 52 margin-left:10px; 53 cursor:pointer; 54 float:left; 55 background-color:#FFF; 56 text-align:center;} 57 </style> 58 59 60 <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 61 <script type="text/javascript"> 62 /* 第一個數組，用來存儲標題 */ 63 var title=new Array(); 64 title[0]="1.店慶第一波 限時搶購 一日三瘋！" 65 title[1]="2.十年店慶均價場 39/99/169專場！" 66 title[2]="3.全場69折封頂 享當當的超值低價！" 67 title[3]="4.店慶鉅獻 海量圖書69折封頂" 68 title[4]="5.十年店慶 名家跨界祝賀 珍藏簽名本專區" 69 70 /* 第二個數組，用來存儲圖片 */ 71 var urls = new Array(); 72 var firNo = 1; 73 var lastNo = 5; 74 for(var i = firNo; i <= lastNo; i++){ 75 urls[i] = "url(images/adRotator_" + i + ".jpg)"; 76 } 77 78 /* 窗體加載完成后的事件 */ 79 window.onload=function(){ 80 /* 為li點擊事件注冊方法，語法值得注意 */ 81 $('#add_pic_nav > ul > li').on('click', 82 function(){ 83 show($(this).text().charAt(0) 84 ); 85 } 86 ); 87 /* 網頁內容一經加載成功，即開始切換廣告顯示 */ 88 show(firNo); 89 } 90 91 /* 重要屬性，用於標記當前顯示的圖片編號 */ 92 var NowNO = 1; 93 /* 重要屬性，用以標記當前使用的計時器 */ 94 var t; 95 96 /* 顯示變換廣告圖片的方法 */ 97 function show(index){ 98 99 /* 如果傳遞了數值 */ 100 if(!isNaN(index)){ 101 if(t != null){ 102 /* 如果當前有計時器在使用 */ 103 /* 清除正在使用的計時器，這很重要，可以減少資源浪費 */ 104 /* 即時在此處無效，也希望大家有這個意識 */ 105 /* 而且在此處計時器會產生干擾 */ 106 clearTimeout(t); 107 } 108 109 /* 將傳入的數值作為當前顯示的圖片和標題編號 */ 110 NowNO = index; 111 112 /* 通過傳入項索引參數獲取到當前需要顯示的廣告內容的項的表達式 */ 113 var str_cur_index = "li:nth-child(" + index + ")"; 114 115 /* 獲取非當前顯示的項的表達式 */ 116 var str_other_index = ":nth-child(" + index + ")"; 117 118 /* 為當前顯示的廣告內容設置響應文本 */ 119 $('#add_pic_nav > ul').children(str_cur_index).text(title[index - 1]); 120 121 /* 為當前顯示的廣告內容導航信息設置樣式 */ 122 $('#add_pic_nav > ul').children(str_cur_index).addClass('active'); 123 124 /* 為當前無需顯示的廣告內容導航設置文本 */ 125 $('#add_pic_nav > ul > li').not(str_other_index).each(function(i){ 126 this.innerHTML = $(this).text().charAt(0); 127 }); 128 129 /* 為當前無需顯示的廣告內容導航設置樣式 */ 130 $('#add_pic_nav > ul > li').not(str_other_index).removeClass('active'); 131 132 /* 設置當前顯示的圖片 */ 133 $('div#add_pic_nav').css("background-image",urls[index]); 134 135 /* 以無參形式繼續調用方法，實現圖片不停止地切換 */ 136 show(); 137 /* 本次方法使用完畢，強制返回 */ 138 return; 139 } 140 else{ 141 if(t != null){ 142 /* 同上 */ 143 clearTimeout(t); 144 } 145 /* 判斷此時是第幾張圖片在顯示，如果是最后一張，則設置一個計時器顯示第一張 */ 146 /* 如果當前不是最后一張圖片，則把顯示下一張圖片添加到計划任務 */ 147 t = NowNO >= lastNo ? setTimeout('show(firNo)',2000):setTimeout('show(NowNO)',2000); 148 NowNO++; 149 } 150 } 151 </script> 152 </head> 153 154 <body> 155 <div id="add_pic_nav"> 156 <ul> 157 <li>1</li> 158 <li>2</li> 159 <li>3</li> 160 <li>4</li> 161 <li>5</li> 162 </ul> 163 </div><!--end of add_pic_nav--> 164 </body> 165 </html>
具體的方法和步驟上面的代碼差不多已經提到了。
有興趣可以試試把上面的做成插件。只給圖片完全路徑，通過動態手段生成div塊。最好需要的參數只是：①某一張圖片的路徑加完全文件名（當然名稱要有規律）②需要生成的div的ID名（或類名）。如果還有的話可以是div的坐標等。
以上的做法很多不得當，我給自己找的毛病首先是不應該使用絕對坐標。雖然漏洞很多，但總歸是我對jQuery和CSS高級運用的一些探索。
大家可以稍微看看。
2012-05-23 17:06:05