本文主要讲述采用html5+jquery+css 制作相册的小小记录。
主要功能点：
Html5进行布局
调用jQuery（借用官网的一句话：The Write Less, Do More）极大的简化了JavaScript编程
CSS 样式将表现与内容分离
立即学习“前端免费学习笔记（深入）”；
话不多说，先上效果图：
代码如下：
nbsp;html>The second html page 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; } $(document).ready(function () { //初始加载六张图片作为缩略图 for (var i = 0; i < 6; i++) { var src = "img/" + "0" + (i + 1).toString() + ".jpg"; var 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); }); });
Html+jQuery + CSS 相册
>" />
登录后复制
更多Html 制作相册相关文章请关注PHP中文网！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2836312.html
