实用美观的JS相册代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是实用美观的JS相册代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为实用美观的JS相册代码，属于站长常用代码" />
<title>实用美观的JS相册代码</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>

<body>

<div id="container">

<h1>Photo Gallery</h1>

<div id="picture_section">
	<div id="inside">
	</div>
</div>
<div id="controls_vert">
	<div id="up" class="deactivated">Scroll Up</div>
    <div id="down">Scroll Down</div>
</div>
<div id="controls_horz">
	<div id="left">Left</div>
    <div id="right">Right</div>
</div>
</div>
<div id="display_picture_container">
    <div id="display_picture">Click on the image to go back to the gallery.</div>
    <div id="display_picture_img"></div>
</div>
</body>
</html>

JS代码(main.js):

var number_of_pictures = 32;
	function show_pictures (){
	var while_pictures = 1;
	while(while_pictures <= number_of_pictures){
	var new_image = new Element('img',{
	'src':'thumbs/' + while_pictures + '.jpg','id':'image_' + while_pictures,'events':{
	'click':function(){
	$('display_picture_img').innerHTML = "<img src=\"" + this.src.replace('thumbs/','pictures/') + "\" id=\"big_picture\" class=\"" + this.id + "\" />";
	$('display_picture_container').fade(1);
	$('big_picture').fade(.999999);
	$('controls_vert').setStyle('display','none');
	if(this.id.replace('image_','')==1){
	$('left').set('class','deactivated');
	$('right').erase('class');
}
else if(this.id.replace('image_','')==number_of_pictures){
	$('left').erase('class');
	$('right').set('class','deactivated');
}
else{
	$('left').set('class','activated');
	$('right').erase('class');
}
$('controls_horz').setStyle('display','block');
	if(Browser.Engine.trident4){
	$('left').tween('margin-left','143px');
}
else{
	$('left').tween('margin-left','286px');
}
}
}
}
);
	new_image.inject($('inside'));
	// preload all of the imagesvar preload_image = new Element('img',{
	'src':'pictures/' + while_pictures + '.jpg','class':'hide'}
);
	preload_image.inject($('container'));
	// NOTE:I didn't create an alt attribute because it won't be seen by anyone here anyway.while_pictures++;
}
}
window.addEvent('domready',function(){
	show_pictures();
	$('display_picture_container').fade('hide');
	var vertical_moves = 0;
	var rows = Math.ceil(number_of_pictures/5);
	if(rows>5){
	$('up').addEvent('click',function(event){
	if(!$('up').hasClass('deactivated')){
	vertical_moves--;
	$('down').erase('class');
	$('inside').tween('margin-top','-'+ (64 * vertical_moves) +'px');
	if (vertical_moves==0){
	$('up').set('class','deactivated');
}
}
}
);
	$('down').addEvent('click',function(event){
	if(!$('down').hasClass('deactivated')){
	vertical_moves++;
	$('up').erase('class');
	$('inside').tween('margin-top','-'+ (64 * vertical_moves) +'px');
	if(vertical_moves == (rows-5)){
	$('down').set('class','deactivated');
}
}
}
);
}
else{
	$('up').set('class','deactivated');
	$('down').set('class','deactivated');
}
var current_id = 1;
	$('left').addEvent('click',function(){
	if(!$('left').hasClass('deactivated')){
	current_id = $('big_picture').get('class').replace('image_','');
	current_id--;
	$('big_picture').fade('hide');
	$('big_picture').set('src','pictures/' + current_id + '.jpg');
	$('big_picture').fade(1);
	$('big_picture').set('class','image_' + current_id);
	if(current_id==1){
	$('left').set('class','deactivated');
}
if(current_id==(number_of_pictures-1)){
	$('right').erase('class');
}
}
}
);
	$('right').addEvent('click',function(){
	if(!$('right').hasClass('deactivated')){
	current_id = $('big_picture').get('class').replace('image_','');
	current_id++;
	$('big_picture').fade('hide');
	$('big_picture').set('src','pictures/' + current_id + '.jpg');
	$('big_picture').fade(1);
	$('big_picture').set('class','image_' + current_id);
	if(current_id==2){
	$('left').erase('class');
}
if(current_id==number_of_pictures){
	$('right').set('class','deactivated');
}
}
}
);
	$('display_picture_img').addEvent('click',function(){
	$('display_picture_container').fade(0);
	$('big_picture').fade(0);
	if(Browser.Engine.trident4){
	$('up').setStyle('margin-left','143px');
}
else{
	$('up').setStyle('margin-left','286px');
}
$('controls_horz').setStyle('display','none');
	$('controls_vert').setStyle('display','block');
	$('left').tween('margin-left','7px');
	$('up').tween('margin-left','7px');
}
);
}
);

CSS代码(main.css):

*{margin:0;padding:0;outline:none;}
.hide{display:none;}
body{background:#333;color:#fff;padding:30px;font-family:Arial,Helvetica,sans-serif;}
#container{width:596px;height:400px;background:#111;overflow:hidden;border:1px solid #333;}
h1{background:#222;width:592px;height:29px;padding-left:7px;border-bottom:1px solid #333;font-size:18px;line-height:29px;font-weight:normal;}
#picture_section{padding:7px 0 7px 7px;width:590px;height:332px;overflow:hidden;}
#inside{width:590px;height:332px;}
#picture_section img{border:0;height:57px;width:111px;float:left;background:#333;margin-bottom:7px;margin-right:7px;cursor:pointer;}
#controls_vert{background:#222;width:600px;height:23px;border-top:1px solid #333;}
#controls_horz{background:#222;width:600px;height:23px;border-top:1px solid #333;display:none;}
#up{height:10px;width:10px;margin-right:7px;background:url(../images/up.jpg) no-repeat;text-indent:-9999px;float:left;margin:7px;margin-bottom:6px;cursor:pointer;}
#down{height:10px;width:10px;background:url(../images/down.jpg) no-repeat;text-indent:-9999px;float:left;margin:7px;margin-left:0;margin-bottom:6px;cursor:pointer;}
#left{height:10px;width:10px;background:url(../images/left.jpg) no-repeat;text-indent:-9999px;float:left;margin:7px;margin-bottom:6px;cursor:pointer;}
#right{height:10px;width:10px;background:url(../images/right.jpg) no-repeat;text-indent:-9999px;float:left;margin:7px;margin-left:0;margin-bottom:6px;cursor:pointer;}
div#up.deactivated{opacity:0.2;filter:alpha(opacity=20);cursor:default;}
div#down.deactivated{opacity:0.2;filter:alpha(opacity=20);cursor:default;}
div#right.deactivated{opacity:0.2;filter:alpha(opacity=20);cursor:default;}
div#left.deactivated{opacity:0.2;filter:alpha(opacity=20);cursor:default;}
#display_picture_container{position:absolute;top:0;left:0;width:700px;height:400px;padding-top:16px;}
#display_picture{position:absolute;top:61px;left:31px;width:596px;height:330px;background:#000;opacity:0.8;filter:alpha(opacity=80);text-align:center;font-size:11px;padding-top:16px;}
#display_picture_img{position:absolute;top:108px;left:65px;height:272px;width:530px;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)