本文主要讲述采用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. 网页提交中文到WEB容器的经历了些什么过程....

    先准备一个网页 <html><meta http-equiv="Content-Type" content="text/html; charset=gb ...

  2. Matlab 高斯_拉普拉斯滤波器处理医学图像

    前言:本程序是我去年实现论文算法时所做.主要功能为标记切割肝脏区域.时间有点久,很多细节已经模糊加上代码做了很多注释,因此在博客中不再详述. NOTE: 程序分几大段功能模块,仔细阅读,对解决医学图像 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  4. Could not evaluate expression

    VS15 调试变量不能显示值,提示:Could not evaluate expression 解决办法: 选择"在调试时显示运行以单击编辑器中的按钮"重启VS即可. 可参考:Vi ...

  5. 安卓客户端a标签长按弹框提示解决办法

    昨天工作时候发现一个bug,是关于a标签的,在安卓客户端中,如果是a标签的话,长按会出现一个弹框,如图所示 是因为安卓客户端的长按触发机制,以后进行wap端开发的时候,如果用到跳转页面尽量不要用a标签 ...

  6. 清除打印机队列中无法清除的任务 & 清空打印池

    故障现象典型表现为以下两种情况 1.当打印任务开始进行时,这些打印任务便被保存在打印作业列表(也称打印队列)内.如果打印机因意外暂停(如打印机未连接)而未完成打印任务,则该打印任务将列入打印队列,并且 ...

  7. Dancing Links and Exact Cover

    1. Exact Cover Problem DLX是用来解决精确覆盖问题行之有效的算法. 在讲解DLX之前,我们先了解一下什么是精确覆盖问题(Exact Cover Problem)? 1.1 Po ...

  8. 我的MYSQL学习心得（八） 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

  9. centos7+mono4.2.3.4+jexus5.8.1跨平台起飞

    很早之前就开始关注.net跨平台,最近正好测试了下用EF6连接mysql,于是就想直接把网站扔进Linux.查了很多资料,鼓捣了两个晚上,终于成功. 这里我使用的是budgetvm的1G openvz ...

  10. 介绍一位OWin服务器新成员TinyFox

    TinyFox 是一款支持OWIN标准的WEB应用的高性能的HTTP服务器,是Jexus Web Server的"姊妹篇".TinyFox本身的功能是html服务器,所有的WEB应 ...