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

主要功能点：

Html5做布局调用jQuery(借用官网的一句话：少写多做)，大大简化了JavaScript编程的CSS风格。表演和内容是分开的，说的不多。首先，效果图：

代码如下：

！DOCTYPE htmlhtmlhead titleThe第二个超文本标记语言页面/title style type=' text/CSS ' ul Li { list-style-type : Georgian；向左文本对齐：}正文{ margin:10px文本对齐：居中；背景-颜色：橙色；}页眉{ height:80pxborder:1px纯灰色；宽度：99% } .左{ border:1px纯灰色；float:left宽度：20%;高度：520 pxmargin :0 pxborder-top-style : one；边框-底部-样式：无；/*设置边框样式*/} .主{宽度：79%；float:left高度：520 px/*border:1px纯灰色；*/border-right:1px纯灰色；余量：0px位置：相对；/*设置成相对*/}页脚{ clear:left高度：60 pxborder:1px纯灰色；宽度：99% } #容器{显示：块；padd :5 px/* border :1 px纯灰色；*/边距：5 px位置：相对；} .小{ display : blockborder-bottom :1 px纯灰色；/*将缩略图，和大图隔开*/} .小img {宽度：150px高度：120 pxmargin :5 pxborder 33601 px纯灰色；padding:3px }。mm { cursor : pointer border-radius :5 px；/*鼠标移入样式*/}输入[type=' button ']{光标：指针；背景-颜色：橙色；color : imefont-家族： arialfont-size :25 px高度：50 px边界：0px宽度：50 px位置：相对；top :150 px } # BTN left { left :30 pxfloat 3360 left } # BTN right { right :30 px右浮动：}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-3。1 .1 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪（函数(){ //初始加载六张图片作为缩略图for(var I=0；i6；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 ').追加(img)；} //设置缩略图的点击事件，以及鼠标移入，移出事件$(' #小img ').单击(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(延迟);}).mouseover(函数(){ $(this)).添加CLaSS(' mm ')；}).mouseleave(函数(){ $(此)).移除CLaSS(' mm ')；});定义变量延迟=1000;//向左切换事件$(' # btnlft ').单击(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(延迟);});//向右切换事件$('#btnRight ').单击(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(延迟);});});/script/headdyheader H2 html jQuery CSS相册/H2/头球攻门=“左”H3相册说明/h3 ul lih4准备阶段：/h4/li li几张图片，最好大小一致，宽高比一致/李莉查询库文件/Li/ul ul Li 4大致思路：/h4/li li将界面分上，中（分左(20%) 右(80%)),下几部分/li li实现缩略图，依次放在一个容器中，并设置样式，时间/li li实现左右切换的事件函数/Li/ul/asideselection class=' main ' div class=' small ' id=' small '/div div id=' container '输入类型='button' id='btnLeft '值=' '/img id=' img ' alt=' 1 ' src=' http : img/01。jpg '宽度='650 '高度='350' /输入类型='button' id='btnRight '值=' '//div/节页脚div这是页脚/div/页脚以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。