Html 製作相簿-html教學-PHP中文網

首頁

web前端

html教學

Html 製作相簿

高洛峰

Feb 20, 2017 pm 01:54 PM

html

本文主要講述採用Html5+jQuery+CSS 製作相簿的小小記錄。

主要功能點：

Html5進行佈局
呼叫jQuery（借用官網的一句話：The Write Less, Do More）極大的簡化了JavaScript程式設計
CSS 樣式將表現與內容分離

話不多說，先上效果圖：

Html 制作相册

代碼如下：

<!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  src="/static/imghwm/default1.png"  data-src="img/01.jpg"  class="lazy"  / alt="Html 製作相簿" >").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 id="Html-jQuery-nbsp-nbsp-CSS-nbsp-相册">Html+jQuery + CSS 相册</h2>
</header>
<aside class="left">
<h3 id="相册说明">相册说明</h3>
   <ul>
        <li><h4 id="准备阶段">准备阶段：</h4></li>
        <li>几张图片，最好大小一致，宽高比一致</li>           
        <li>jQuery库文件</li>
    </ul>
    <ul>
        <li><h4 id="大致思路">大致思路：</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 src="/static/imghwm/default1.png"  data-src="img/01.jpg"  class="lazy"  id="img" alt="1"     style="max-width:90%"  style="max-width:90%" />
        <input type="button" id="btnRight" value=">>" />
    </div>
</section>
<footer>
    <div>This is the footer</div>
</footer>
</body>
</html>

更多Html 製作相冊相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles