本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。

主要功能点：

Html5进行布局

调用jQuery(借用官网的一句话：The Write Less, Do More)极大的简化了JavaScript编程

CSS 样式将表现与内容分离

话不多说，先上效果图：

代码如下：

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 相册

相册说明

• 准备阶段：

• 几张图片，最好大小一致，宽高比一致
• jQuery库文件

• 大致思路：

• 将界面分上，中(分 左(20%) 右(80%))，下 几部分
• 实现缩略图，依次放在一个容器中，并设置样式，时间
• 实现左右切换的事件函数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。