相信非常多网站设计的时候都会运用到横向相册效果一样的幻灯片，这样可以美化网站，让访客印象深刻（如图），那么网站设计如何加上这样的相册效果呢？其实很简单，只要把代码复制到要放到的图层即可。上海网站建设公司不同领域的网页设计，网页图形设计，界面设计，创作，其中包括标准化的代码和专有软件，用户体验设计和搜索引擎优化。许多人常常会分为若干个工作小组，负责网站不同方面的设计。网站建设符合标准的是一个术语，经常被用来描述网站和用户代理（通常是Web浏览器）相对符合web标准由万维网联盟（W3C）建议，也可以用来强调不使用专有的 方法或功能这些浏览器，以确保互操作性。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE（标题）>无标题（TITLE（标题））文档</TITLE（标题）> </head> <body> <TITLE（标题）></TITLE（标题）> <style> body {background:#000;margin:0;font:12px Verdana;text-align:center;} #tbody {width:650px;margin:20px auto;text-align:left;} #mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px} #mainphoto {cursor:pointer;display:block;} #goleft {float:left;clear:left;margin:6px 5px 0 3px;} #goright {float:right;clear:right;margin:6px 3px 0 5px;} #photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;} #showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222} .txt_1 {font:bold 24px Verdana, T千毫安oma;color:#fff;} </style> <body> <div id="tbody"> <div id="mainbody"> <img src="1524244292-1.jpg" width="640" height="400" id="mainphoto" rel="1524244292-1.jpg" name="" /> </div> <img src="left.jpg" width="11" height="56" id="goleft" /> //需要更换图片地址 <img src="right.jpg" width="11" height="56" id="goright" /> //需要更换图片地址 <div id="photos"> <div id="showArea"> <!-- SRC: 缩略图地址 REL: 大图地址 NAME: 网址 --> <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="" /> <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="" /> //需要更换图片地址 <img src="942ef5261aebfd3f918f9dd2.jpg" width="80" height="50" rel="942ef5261aebfd3f918f9dd2.jpg" name="" /> //需要更换图片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="" /> //需要更换图片地址 <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="" /> //需要更换图片地址 <img src="334fbeadd6d1bfc1faed500d.jpg" width="80" height="50" rel="334fbeadd6d1bfc1faed500d.jpg" name="" /> //需要更换图片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="" /> //需要更换图片地址 <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="" /> //需要更换图片地址 <img src="d772613c17a6a5d43d6d9792.jpg" width="80" height="50" rel="d772613c17a6a5d43d6d9792.jpg" name="" /> //需要更换图片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="/1524244292-1.jpg" name="" /> //需要更换图片地址 <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="" /> //需要更换图片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="" /> //需要更换图片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="" /> //需要更换图片地址 <img src="b292d0d05ebaa2fa572c8491.jpg" width="80" height="50" rel="b292d0d05ebaa2fa572c8491.jpg" name="" /> //需要更换图片地址 <img src="1524244292-1.jpg" width="80" height="50" rel="1524244292-1.jpg" name="" /> //需要更换图片地址 </div> </div> </div> </body> </html> <script language="javascript" type="text/javascript"> var browse = window.navigator.appName.toLowerCase(); var MyMar; var speed = 1; //速度，越大越慢 var spec = 1; //每次滚动的间距, 越大滚动越快 var minOpa = 50; //滤镜最小值 var maxOpa = 100; //滤镜最大值 var spa = 2; //缩略图区域补充数值 var w = 0; spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20); function $(e) {return document.getElementById(e);} function goleft() {$('photos').scrollLeft -= spec;} function goright() {$('photos').scrollLeft += spec;} function setOpacity(e, n) { if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')'; else e.style.opacity = n/100; } $('goleft').style.cursor = 'pointer'; $('goright').style.cursor = 'pointer'; $('mainphoto').onmouSEO(搜索引擎优化)(搜索引擎优化)ver = function() {setOpacity(this, maxOpa);} $('mainphoto').onmouSEO(搜索引擎优化)(搜索引擎优化)ut = function() {setOpacity(this, minOpa);} $('mainphoto').onclick = function() {location = this.getAttribute('name');} $('goleft').onmouSEO(搜索引擎优化)(搜索引擎优化)ver = function() {this.src = 'left2.jpg'; MyMar=setInterval(goleft, speed);} $('goleft').onmouSEO(搜索引擎优化)(搜索引擎优化)ut = function() {this.src = 'left.jpg'; clearInterval(MyMar);} $('goright').onmouSEO(搜索引擎优化)(搜索引擎优化)ver = function() {this.src = 'right2.jpg'; MyMar=setInterval(goright,speed);} $('goright').onmouseout = function() {this.src = 'right.jpg'; clearInterval(MyMar);} window.onload = function() { setOpacity($('mainphoto'), minOpa); var rHtml = ''; var p = $('showArea').getElementsByTagName('img'); for (var i=0; i<p.length; i++) { w += parseInt(p[i].getAttribute('width')) + spa; setOpacity(p[i], minOpa); p[i].onclick = function() {location = this.getAttribute('name');} p[i].onmouseover = function() { setOpacity(this, maxOpa); $('mainphoto').src = this.getAttribute('rel'); $('mainphoto').setAttribute('name', this.getAttribute('name')); setOpacity($('mainphoto'), maxOpa); } p[i].onmouseout = function() { setOpacity(this, minOpa); setOpacity($('mainphoto'), minOpa); } rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />'; } $('showArea').style.width = parseInt(w) + 'px'; var rLoad = document.createElement("div"); $('photos').appendChild(rLoad); rLoad.style.width = "1px"; rLoad.style.height = "1px"; rLoad.style.overflow = "hidden"; rLoad.innerHTML = rHtml; } </script> </body> </html>
提示：您可以先修改部分代码再运行
素材图片：
网站设计的好看，访问量自然会增多，利用相册的效果可以提高网站设计的视觉效果，更受到客户的亲睐。上海网站建设而更复杂的信息如矢量图形、动画、视频、声频等多媒体档案则需要插件程序来运行，同样地它们亦需要标示语言移植在网站内。网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。上海网站建设通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站。简单的信息如文字，图片（GIF，JPEG，PNG）和表格，都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。
