导航+轮播图(手动)

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实现轮播图(自动和手动)

英雄联盟轮播图手动轮播

原生js手动轮播图

Html+CSS+JS轮播图:手动轮播,自动轮播

前端Vue项目:旅游App-(21)detail:房屋详情页及其数据返回导航栏轮播图

vue3.0项目中实现手动封装轮播图