標籤：int oat osi 樣式表 js代碼 導覽列 log 菜單 css3
（一）導覽列的製作
顯示的效果：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; position: relative; } .div2 { width: 100px; height: 230px; background-color: yellow; float: left; margin-right: 10px; position: absolute; top: 30px; display: none; } </style></head><body> <div class="div1" id="div_1"> <div class="div2"> </div> </div> <div class="div1" id="div_2"> <div class="div2"> </div> </div> <div class="div1" id="div_3"> <div class="div2"> </div> </div> <div class="div1" id="div_4"> <div class="div2"> </div> </div> <div class="div1" id="div_5"> <div class="div2"> </div> </div></body></html><script type="text/javascript"> var a = document.getElementsByClassName(‘div1‘); var b = document.getElementsByClassName(‘div2‘); for (var i = 0; i < a.length; i++) { //滑鼠移入 a[i].index = i;//記錄一個int類型的值，使div1和div2對應起來滑鼠移入移除的時候顯示相應的下拉式功能表 a[i].onmouseover = function () { a[this.index].style.backgroundColor = ‘black‘;//滑鼠移入的時候div1變色 b[this.index].style.display = ‘block‘; } //滑鼠移除 a[i].onmouseout = function () { a[this.index].style.backgroundColor = ‘red‘;//滑鼠移除的時候div1恢複原來的顏色 b[this.index].style.display = ‘none‘; } }</script>
（二）選項卡的製作
點擊導覽列，div中的內容發生變化，變化用數字代替
css樣式：
.div1 { width:100px; height:30px; float:left; margin-right:10px; background-color:red;}.div2 { top:40px; background-color:blue; width:540px; height:300px; position:absolute; z-index:100;
}
js代碼div內容：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Css/Css3.css" rel="stylesheet" /></head><body> <div class="div1" id="d1"></div> <div class="div1" id="d2"></div> <div class="div1" id="d3"></div> <div class="div1" id="d4"></div> <div class="div1" id="d5"></div> <div class="div2" id="da" style="z-index:101;">111</div> <div class="div2" id="db">222</div> <div class="div2" id="dc">333</div> <div class="div2" id="de">444</div> <div class="div2" id="df">555</div></body></html><script type="text/javascript"> var a = document.getElementsByClassName(‘div1‘); var b = document.getElementsByClassName(‘div2‘); var count = 102; for (var i = 0; i < a.length; i++) { //滑鼠移入 a[i].onmouseover = function () { if (this.style.backgroundColor != ‘black‘) {//滑鼠移入的時候只要不是黑色都變成黃色 this.style.backgroundColor = ‘yellow‘; } } //滑鼠移出 a[i].onmouseout = function () { if (this.style.backgroundColor == ‘yellow‘) { this.style.backgroundColor = ‘red‘; } } //滑鼠點擊 a[i].index = i;//用於計數比較的一定要放在點擊事件的外面 a[i].onclick = function () { for (var j = 0; j < a.length;j++){ a[j].style.backgroundColor = ‘red‘; } this.style.backgroundColor = ‘black‘; //選項卡切換 b[this.index].style.zIndex = count; count++; } }</script>
（三）圖片輪播
顯示效果：
css樣式表：
.div1 { width:730px; height:336px; position:relative; background-color:red;} .div1 img { width:100%; height:100%; position:absolute; display:none; }.but { width:40px; height:50px; background-color:#808080; z-index:1000; position:absolute; top:50%; margin-top:-25px; font-size:30px; line-height:50px; font-weight:bold; text-align:center; cursor:pointer;}
js和內容：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="Css/Css4.css" rel="stylesheet" /></head><body> <div class="div1" id="da"> <img class="img" src="images/1_1.jpg" style="display:block"/> <img class="img" src="images/1_2.jpg" /> <img class="img" src="images/1_3.jpg" /> <img class="img" src="images/1_4.jpg" /> <img class="img" src="images/1_5.jpg" /> <img class="img" src="images/1_6.jpg" /> <div class="but" id="but_left"><</div> <div class="but" id="but_right" style="right:0px;">></div> </div></body></html><script type="text/javascript"> var images = document.getElementsByClassName(‘img‘); var count = 0; //左滑動事件 document.getElementById(‘but_left‘).onclick = function () { for (var i = 0; i < images.length; i++) { images[i].style.display = ‘none‘; } count--; if (count <0) { count = images.length - 1; } images[count].style.display = ‘block‘; } //右滑動事件 document.getElementById(‘but_right‘).onclick = function () { for (var i = 0; i < images.length;i++){ images[i].style.display = ‘none‘; } count++; if (count > (images.length - 1)) { count = 0; } images[count].style.display = ‘block‘; } </script>
2017-3-30 Js實現導覽列，選項卡，圖片輪播的製作
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
