导航+轮播图（手动）
Posted ljuyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航+轮播图（手动）相关的知识，希望对你有一定的参考价值。
今天用html和css照着网上的实例写了个小导航，我突然发现不用js也可以做出高大上的感觉，关键还是自己的想象力和艺术感不高。没有做不到，只有想不到。。。
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"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <link rel="stylesheet" type="text/css" href="作业/8.1作业/css/common.css" /> 7 <style type="text/css"> 8 .menu{width:750px;} 9 .menu ul{width:750px;} 10 .menu ul li{float:left;background:#c9c9a7;width:100px;margin-left:1px;} 11 .menu ul li a{display:block;height:30px;text-align:center;line-height:30px;color:white;} 12 .menu ul ul{display:none;margin-top:1px;position:absolute;left:0;top:29px;} 13 .menu ul ul li{background:#b3ab79;} 14 .menu ul ul ul li{background:#dfc184;} 15 .menu ul ul.ul3{position:absolute;top:29px;left:203px;} 16 .menu ul ul.ul4{position:absolute;top:29px;left:405px;} 17 .menu ul ul.ul5{position:absolute;top:29px;left:102px;} 18 .menu ul ul ul.ul1{display:none;position:absolute;top:29px;left:405px;} 19 .menu ul ul ul.ul2{display:none;position:absolute;top:29px;left:203px;} 20 .menu ul li:hover ul{display:block;} 21 .menu ul li:hover ul ul{display:none;} 22 .menu ul li ul li:hover ul{display:block;} 23 </style> 24 25 </head> 26 27 <body> 28 <div class="menu"> 29 <ul class="clearfix"> 30 <li><a href="#">DEMOS</a> 31 <ul class="clearfix"> 32 <li><a href="#">zero dollars</a></li> 33 <li><a href="#">wrapping text</a></li> 34 <li><a href="#">styled form</a></li> 35 <li><a href="#">active focus</a></li> 36 <li><a href="#">HOVER/CLICK</a> 37 <ul class="ul1 clearfix"> 38 <li><a href="#">hover/click</a></li> 39 <li><a href="#">active focus</a></li> 40 <li><a href="#">styled form</a></li> 41 </ul> 42 </li> 43 <li><a href="#">shadowing boxing</a></li> 44 <li><a href="#">image map</a></li> 45 </ul> 46 </li> 47 <li><a href="#">MENUS</a> 48 <ul class="clearfix"> 49 <li><a href="#">spies menu</a></li> 50 <li><a href="#">vertical menu</a></li> 51 <li><a href="#">enlarging list</a></li> 52 <li><a href="#">link images</a></li> 53 <li><a href="#">non-rectangular</a></li> 54 <li><a href="#">jigsaw links</a></li> 55 <li><a href="#">circular links</a></li> 56 </ul> 57 </li> 58 <li><a href="#">LAYOUTS</a> 59 <ul class="ul3 clearfix"> 60 <li><a href="#">Fixed1</a></li> 61 <li><a href="#">Fixed2</a></li> 62 <li><a href="#">Fixed3</a></li> 63 <li><a href="#">Fixed4</a></li> 64 <li><a href="#">minimum width</a></li> 65 </ul> 66 </li> 67 <li><a href="#">BOXES</a> 68 <ul class="clearfix"> 69 <li><a href="#">spies menu</a></li> 70 <li><a href="#">vertical</a></li> 71 <li><a href="#">enlarging list</a></li> 72 <li><a href="#">link images</a></li> 73 <li><a href="#">non-retangular</a></li> 74 <li><a href="#">jigsaw links</a></li> 75 <li><a href="#">circular links</a></li> 76 </ul> 77 </li> 78 <li><a href="#">MOZILLA</a> 79 <ul class="clearfix"> 80 <li><a href="#">drop down menu</a></li> 81 <li><a href="#">cascading menu</a></li> 82 <li><a href="#">content</a></li> 83 <li><a href="#">mazzie box</a></li> 84 <li><a href="#">rainbow box</a></li> 85 <li><a href="#">snooker cue</a></li> 86 <li><a href="#">target practice</a></li> 87 </ul> 88 </li> 89 <li><a href="#">EXPLORER</a> 90 <ul class="ul4 clearfix"> 91 <li><a href="#">vertical align</a></li> 92 <li><a href="#">weft fonts</a></li> 93 <li><a href="#">example one</a></li> 94 </ul> 95 </li> 96 <li><a href="#">OPACITY</a> 97 <ul class="ul5 clearfix"> 98 <li><a href="#">HOVER/CLICK</a> 99 <ul class="u2"> 100 <li><a href="#">styled form</a></li> 101 <li><a href="#">active focus</a></li> 102 <li><a href="#">hover/click</a></li> 103 </ul> 104 </li> 105 <li><a href="#">partial opacity ll</a></li> 106 <li><a href="#">partial opacity ll</a></li> 107 <li><a href="#">partical opacity</a></li> 108 <li><a href="#">opaque menu</a></li> 109 <li><a href="#">opaque colours</a></li> 110 </ul> 111 </li> 112 </ul> 113 </div> 114 </body> 115 </html>
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"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <link rel="stylesheet" type="text/css" href="css/common.css" /> 7 <style type="text/css"> 8 .img{margin:0 auto;width:400px;position:relative;} 9 img{width:400px;height:500px;margin-top:10px;} 10 .img div #head{width:400px;height:20px;background:#999;opacity:0.5;text-align:center;color:#fff;position:absolute;top:37px;line-height:20px;} 11 .img div #footer{width:400px;height:20px;background:#999;opacity:0.5;text-align:center;color:#fff;position:absolute;bottom:0;line-height:20px;} 12 </style> 13 </head> 14 <body> 15 <div class="img"> 16 <input type="button" value="上一张" id="btn1"/> 17 <input type="button" value="下一张" id="btn2"/> 18 <div> 19 <img id="image"/> 20 <div id="head"> 21 </div> 22 <div id="footer"> 23 </div> 24 </div> 25 </div> 26 <script> 27 var oBtn1 = document.getElementById("btn1"); 28 var oBtn2 = document.getElementById("btn2"); 29 var oImage = document.getElementById("image"); 30 var oHead = document.getElementById("head"); 31 var oFooter = document.getElementById("footer"); 32 var arr = [‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘]; 33 var arr1 = [‘老鹰‘,‘魔女‘,‘精灵‘,‘钢铁侠‘]; 34 var num = 0; 35 oImage.src = arr[num]; 36 oHead.innerHTML = num+1+"/"+arr.length; 37 oFooter.innerHTML = arr1[num]; 38 39 oBtn1.onclick = function(){ 40 if(num > 0) 41 oImage.src = arr[--num]; 42 else 43 { 44 num = arr.length-1; 45 oImage.src = arr[num]; 46 } 47 oHead.innerHTML = num+1+"/"+arr.length; 48 oFooter.innerHTML = arr1[num]; 49 }; 50 oBtn2.onclick = function(){ 51 if(num < (arr.length-1)) 52 oImage.src = arr[++num]; 53 else 54 { 55 num = 0; 56 oImage.src = arr[num]; 57 } 58 oHead.innerHTML = num+1+"/"+arr.length; 59 oFooter.innerHTML = arr1[num]; 60 }; 61 </script> 62 </body> 63 </html>
以上是关于导航+轮播图（手动）的主要内容，如果未能解决你的问题，请参考以下文章
Android使用ViewPager实现轮播图（自动和手动）