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

主要功能点：

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

效果图

话不多说，先上效果图：

核心代码

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>The second html page</title>

     <style type="text/css">

          ul li

         {

             list-style-type:georgian;

             text-align:left;

          }

          body

          {

            margin:10px;

            text-align:center;

            background-color:Orange;

           }

            header

         {

             height:80px;

             border:1px solid gray;

             width:99%

         }

          .left

         {

             border:1px solid gray;

             float:left;

             width:20%;

             height:520px;

             margin:0px;

             border-top-style:none;

             border-bottom-style:none;

             /*设置边框样式*/

         }

         .main

         {

             width:79%;

             float:left;

             height:520px;

             /*border:1px solid gray;*/

             border-right:1px solid gray;

             margin:0px;

             position:relative;/*设置成相对*/

         }

          footer

         {

             clear:left;

             height:60px;

             border:1px solid gray;

             width:99%

         }

         #container

         {

             display:block;

             padding:5px;

            /* border:1px solid gray;*/

             margin:5px;

             position:relative;

          }

          .small

          {

              display:block;

              border-bottom:1px solid gray;/*将缩略图，和大图隔开*/

          }

          .small img

          {

              width:150px;

              height:120px;

              margin:5px;

              border:1px solid gray;

              padding:3px;

          }

          .mm

          {

              cursor:pointer;

              border-radius:5px;/*鼠标移入样式*/

           }

          input[type="button"]

          {

              cursor:pointer;

              background-color:Orange;

              color:Lime;

              font-family:Arial;

              font-size:25px;

              height:50px;

              border:0px;

              width:50px;

              position:relative;

              top:150px;

           }

           #btnLeft

           {

            left:30px;

            float:left;

           }

            #btnRight

           {

            right:30px;

            float:right;

           }

     </style>

     <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             //初始加载六张图片作为缩略图

             for (var i = 0; i < 6; i++) {

                 var src = "img/" + "0" + (i + 1).toString() + ".jpg";

                 var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);

                 $("#small").append(img);

             }

             //设置缩略图的点击事件，以及鼠标移入，移出事件

             $("#small img").click(function () {

                 $("#img").css("display", "none");

                 var src = $(this).attr("src");

                 var alt = $(this).attr("alt");

                 var nAlt = parseInt(alt);

                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

             }).mouseover(function () {

                 $(this).addClass("mm");

             }).mouseleave(function () {

                 $(this).removeClass("mm");

             });

             var delay = 1000;

             //向左切换事件

             $("#btnLeft").click(function () {

                 $("#img").css("display", "none");

                 var alt = $("#img").attr("alt");

                 if (alt == "1") {

                     alt = 7;

                 }

                 var nAlt = parseInt(alt) - 1;

                 var src = "img/" + "0" + nAlt.toString() + ".jpg";

                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

             });

             //向右切换事件

             $("#btnRight").click(function () {

                 $("#img").css("display", "none");

                 var alt = $("#img").attr("alt");

                 if (alt == "6") {

                     alt = 0;

                 }

                 var nAlt = parseInt(alt) + 1;

                 var src = "img/" + "0" + nAlt.toString() + ".jpg";

                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

             });

         });

     </script>

 </head>

 <body>

 <header>

 <h2>Html+jQuery + CSS 相册</h2>

 </header>

 <aside class="left">

 <h3>相册说明</h3>

    <ul>

         <li><h4>准备阶段：</h4></li>

         <li>几张图片，最好大小一致，宽高比一致</li>

         <li>jQuery库文件</li>

     </ul>

     <ul>

         <li><h4>大致思路：</h4></li>

         <li>将界面分<b>上</b>，<b>中</b>（分 <b>左（20%）</b> <b>右（80%）</b>），<b>下</b> 几部分</li>

         <li>实现缩略图，依次放在一个容器中，并设置样式，时间</li>

         <li>实现左右切换的事件函数</li>

     </ul>

 </aside>

 <section class="main">

     <div class="small" id="small">

     </div>

     <div id="container">

         <input type="button" id="btnLeft" value="<<" />

         <img id="img" alt="1" src="img/01.jpg" width="650" height="350" />

         <input type="button" id="btnRight" value=">>" />

     </div>

 </section>

 <footer>

     <div>This is the footer</div>

 </footer>

 </body>

 </html>

Html 制作相册的更多相关文章

  1. 用PhotoSwipe制作相册，手势可放大

    1.引入css和js <link href="css/photoswipee.css" rel="stylesheet" type="text/ ...

  2. iOS:UICollectionView纯自定义的布局：堆叠式布局、圆式布局 (一般用来制作相册)

    集合视图的自动布局:UICollectionViewLayout是抽象根类,必须用它的子类才能创建实例,下面是重写的方法,计算item的布局属性 //每一次重新布局前,都会准备布局(苹果官方推荐使用该 ...

  3. 用node.js实现mvc相册资源管理器

    摘要:通过前两天的学习我大概学了了,用formidable模块文件上传,express框架,以及利用fs模块进行文件读取,今天我学习了如何用这些知识来制作相册,暂没有数据库,所以做的也是本地的资源管理 ...

  4. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  5. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  6. 一篇博客理解Recyclerview的使用

    从Android 5.0开始,谷歌公司推出了RecylerView控件,当看到RecylerView这个新控件的时候,大部分人会首先发出一个疑问,recylerview是什么?为什么会有recyler ...

  7. ppoint的使用

    ppt中的所有东西都要看作是 "对象" . 对 "对象"的操作逻辑是: 单击, 右键单击,双击(右键的时候, 直接就右键, 不必先选中再右键操作) 在ppt中, ...

  8. android高仿人人网

    经过几个月的努力,终于基本完成了人人API拥有的所有功能,界面采用仿照人人梦想版5.13制作,其中资源文件也采用人人的APK文件资源,完成的功能及知识点如下: 1.通过三种动画仿照出人人引导页的放大切 ...

  9. K8s 从懵圈到熟练 – 镜像拉取这件小事

    作者 | 声东 阿里云售后技术专家 导读:相比 K8s 集群的其他功能,私有镜像的自动拉取,看起来可能是比较简单的.而镜像拉取失败,大多数情况下都和权限有关.所以,在处理相关问题的时候,我们往往会轻松 ...

随机推荐

  1. NodeJs之调试

    关于调试 当我们只专注于前端的时候,我们习惯性F12,这会给我们带来安全与舒心的感觉. 但是当我们使用NodeJs来开发后台的时候,我想噩梦来了. 但是也别泰国担心,NodeJs的调试是很不方便!这是 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. 8.仿阿里云虚拟云服务器的FTP（包括FTP文件夹大小限制）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 原文:http://dnt.dkill.net/Ar ...

  4. HTML5 语义元素(二)文本内容

    上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...

  5. Objective-C中block的底层原理

    先出2个考题: 1. 上面打印的是几,captureNum2 出去作用域后是否被销毁?为什么? 同样类型的题目: 问:打印的数字为多少? 有人会回答:mutArray是captureObject方法的 ...

  6. node模块加载层级优化

    模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载.但是随着应用规模的加大,目录层级越来越深,若是在某个 ...

  7. Entity Framework 手动使用migration里面的up 和down方法。

    add-migration -IgnoreChanges 201606100717405_201606100645298_InitialCreate 执行这一句后 ,清空使用map生成的代码,个人不太 ...

  8. CocoaPods的安装、使用、以及遇到的问题

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而 ...

  9. C语言可以开发哪些项目？

    C语言是我们大多数人的编程入门语言,对其也再熟悉不过了,不过很多初学者在学习的过程中难免会出现迷茫,比如:不知道C语言可以开发哪些项目,可以应用在哪些实际的开发中--,这些迷茫也导致了我们在学习的过程 ...

  10. git快速get

    配置:git config --global user.name 'yangshaoxiang' git config --global user.email '254135495@qq.com' s ...