本文主要讲述采用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. Linux scp 设置nohup后台运行

    Linux scp 设置nohup后台运行 1.正常执行scp命令 2.输入ctrl + z 暂停任务 3.bg将其放入后台 4.disown -h 将这个作业忽略HUP信号 5.测试会话中断,任务继 ...

  2. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  3. BlockingCollection使用

    BlockingCollection是一个线程安全的生产者-消费者集合. 代码 public class BlockingTest { BlockingCollection<int> bc ...

  4. SharePoint2016安装的过程的”Microsoft.SharePoint.Upgrade.SPUpgradeException”错误解决方法

    前提 在windows server 2012的服务器上运行安装sharepoint2016出现如下错误: Could not load file or assembly ‘Microsoft.Dat ...

  5. Android之网络数据存储

    一.网络保存数据介绍 可以使用网络来保存数据,在需要的时候从网络上获取数据,进而显示在App中. 用网络保存数据的方法有很多种,对于不同的网络数据采用不同的上传与获取方法. 本文利用LeanCloud ...

  6. QDEZ集训笔记【更新中】

    这是一个绝妙的比喻,如果青岛二中的台阶上每级站一只平度一中的猫,差不多站满了吧 自己的理解 [2016-12-31] [主席树] http://www.cnblogs.com/candy99/p/61 ...

  7. 创建maven项目（cmd 命令）

    2016五月 22 原 创建maven项目(cmd 命令) 分类:maven (994) (0) 1.普通方式创建 1)进入cmd窗口执行 mvn archetype:generate 2) 光标停止 ...

  8. ubuntu+mono+jexus 搭建.net的web平台 实现.net跨平台

    准备工作: vmware 用来安装 ubuntu 下载地址:VMware-workstation-9.0.1-894247.exe.tar 注册码: 1A4P8-DMK0N-FZ431-7K8NH-2 ...

  9. Kafka1 利用虚拟机搭建自己的Kafka集群

    前言:       上周末自己学习了一下Kafka,参考网上的文章,学习过程中还是比较顺利的,遇到的一些问题最终也都解决了,现在将学习的过程记录与此,供以后自己查阅,如果能帮助到其他人,自然是更好的. ...

  10. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...