首页 > > 网页制作 > css >

Html 制作相册

2018-06-24 00:52:02来源：未知阅读 ()

本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。

主要功能点：

Html5进行布局
调用jQuery（借用官网的一句话：The Write Less, Do More）极大的简化了JavaScript编程
CSS 样式将表现与内容分离

效果图

话不多说，先上效果图：

核心代码

代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>The second html page</title>
  5     <style type="text/css">
  6          ul li
  7         {
  8             list-style-type:georgian;
  9             text-align:left;
 10          }
 11          body
 12          {
 13            margin:10px;
 14            text-align:center;   
 15            background-color:Orange;
 16           }
 17            header
 18         {
 19             height:80px;
 20             border:1px solid gray;
 21             width:99%
 22         }
 23          .left
 24         {
 25             border:1px solid gray;
 26             float:left;
 27             width:20%;
 28             height:520px;
 29             margin:0px;
 30             border-top-style:none;
 31             border-bottom-style:none;
 32             /*设置边框样式*/
 33         }
 34         .main
 35         {
 36             width:79%;
 37             float:left;
 38             height:520px;
 39             /*border:1px solid gray;*/
 40             border-right:1px solid gray;
 41             margin:0px;
 42             position:relative;/*设置成相对*/
 43         }
 44          footer
 45         {
 46             clear:left;
 47             height:60px;
 48             border:1px solid gray;
 49             width:99%
 50         }
 51         #container
 52         {
 53             display:block;
 54             padding:5px;
 55            /* border:1px solid gray;*/
 56             margin:5px;
 57             position:relative;
 58          }
 59          .small
 60          {
 61              display:block;
 62              border-bottom:1px solid gray;/*将缩略图，和大图隔开*/
 63          }
 64          .small img
 65          {
 66              width:150px;
 67              height:120px;
 68              margin:5px;
 69              border:1px solid gray;
 70              padding:3px;
 71          }
 72          .mm
 73          {
 74              cursor:pointer;
 75              border-radius:5px;/*鼠标移入样式*/
 76              
 77           }
 78          input[type="button"]
 79          {
 80              cursor:pointer;
 81              background-color:Orange;
 82              color:Lime;
 83              font-family:Arial;
 84              font-size:25px;
 85              height:50px;
 86              border:0px;
 87              width:50px;
 88              position:relative;
 89              top:150px;
 90           }
 91           #btnLeft
 92           {
 93            left:30px; 
 94            float:left;
 95           }
 96            #btnRight
 97           {
 98            right:30px;    
 99            float:right;
100           }
101     </style>
102     <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
103     <script type="text/javascript">
104         $(document).ready(function () {
105             //初始加载六张图片作为缩略图
106             for (var i = 0; i < 6; i++) {
107                 var src = "img/" + "0" + (i + 1).toString() + ".jpg";
108                 var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);
109                 $("#small").append(img);
110             }
111             //设置缩略图的点击事件，以及鼠标移入，移出事件
112             $("#small img").click(function () {
113                 $("#img").css("display", "none");
114                 var src = $(this).attr("src");
115                 var alt = $(this).attr("alt");
116                 var nAlt = parseInt(alt);
117                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
118             }).mouseover(function () {
119                 $(this).addClass("mm");
120             }).mouseleave(function () {
121                 $(this).removeClass("mm");
122             });
123             var delay = 1000;
124             //向左切换事件
125             $("#btnLeft").click(function () {
126                 $("#img").css("display", "none");
127                 var alt = $("#img").attr("alt");
128                 if (alt == "1") {
129                     alt = 7;
130                 }
131                 var nAlt = parseInt(alt) - 1;
132                 var src = "img/" + "0" + nAlt.toString() + ".jpg";
133                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
134             });
135             //向右切换事件
136             $("#btnRight").click(function () {
137                 $("#img").css("display", "none");
138                 var alt = $("#img").attr("alt");
139                 if (alt == "6") {
140                     alt = 0;
141                 }
142                 var nAlt = parseInt(alt) + 1;
143                 var src = "img/" + "0" + nAlt.toString() + ".jpg";
144                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
145 
146             });
147         });
148     </script>
149 </head>
150 <body>
151 <header>
152 <h2>Html+jQuery + CSS 相册</h2>
153 </header>
154 <aside class="left">
155 <h3>相册说明</h3>
156    <ul>
157         <li><h4>准备阶段：</h4></li>
158         <li>几张图片，最好大小一致，宽高比一致</li>           
159         <li>jQuery库文件</li>
160     </ul>
161     <ul>
162         <li><h4>大致思路：</h4></li>
163         <li>将界面分<b>上</b>，<b>中</b>（分 <b>左（20%）</b> <b>右（80%）</b>），<b>下</b> 几部分</li>
164         <li>实现缩略图，依次放在一个容器中，并设置样式，时间</li>
165         <li>实现左右切换的事件函数</li>
166     </ul>
167 </aside>
168 <section class="main">
169     <div class="small" id="small">
170    
171     </div>
172     <div id="container">
173         <input type="button" id="btnLeft" value="<<" />
174         <img id="img" alt="1" src="img/01.jpg" width="650" height="350" />
175         <input type="button" id="btnRight" value=">>" />
176     </div>
177 </section>
178 <footer>
179     <div>This is the footer</div>
180 </footer>
181 </body>
182 </html>