本文主要講述采用Html5+jQuery+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; /*設(shè)置邊框樣式*/ } .main { width:79%; float:left; height:520px; /*border:1px solid gray;*/ border-right:1px solid gray; margin:0px; position:relative;/*設(shè)置成相對*/ } 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); } //設(shè)置縮略圖的點擊事件，以及鼠標移入，移出事件 $("#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>實現(xiàn)縮略圖，依次放在一個容器中，并設(shè)置樣式，時間</li> <li>實現(xiàn)左右切換的事件函數(shù)</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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
