javascript的相册效果

piperzero

浏览: 3555524 次
性别:
来自: 杭州

最近访客更多访客>>

handsome1234

u012363178

zhangketuan

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3796)

社区版块

存档分类

当鼠标移动到小图时自动显示出大图，当鼠标点击top图片时，大图自动显示上一个图片
，当鼠标点击bottom时，大图自动显示下一个图片

<html>
<head>
 <meta http-equiv="content-Type" content="text/html;charset=gb2312"/>
 <title>纵向JS相册效果</title>
 <style type="text/css">
   body{
        background:#000000;
		margin:20px 0;
		font:12px Verdana,Arial,Tahoma;
		text-align:center; 
		vertical-align:middle;
		color:#ffffff}
	img{
	    border:none }
	.txt_1{
	    font:bold 24px Verdana,Tahoma; 
		color:#fff }
	img.thumb_img{
	    cursor: pointer;
		dispaly:block;
		margin-bottom:10px
		 }
	img #main_img{
	    cursor:pointer;
		display:block; }
	#gotop{
	    cursor:pointer;
		display:block; }
	#gobottom{
	    cursor:pointer;
		display:block; }
	#showArea{
	    height:355px;
		margin:10px;
		
		overflow:hidden }
 </style>
 </head>
 <body>
    <table width="760" border='0' align='center' cellpadding='0'n cellspacing='5'>
	<tr>
	  <td height='75' colspan='2' align='left' class="txt_1">javaScript相册效果</td>
	<tr>
	  <td width='640' align='center'>
	    <img src='images/03.jpg' width='640' height='400' border='0' id='main_img' rel='images/03.jpg'/></td>
	  <td width='110' align='center' valign='top'>
	    <img src='images/gotop.gif' width='100' height='14' id='gotop' alt='top'/>
		<div id='showArea'>
		 <img src='images/01.jpg' width='80' height='50' border='0' class='thumb_img' rel='images/01.jpg'/>
		 <img src='images/02.jpg' width='80' height='50' border='0' class='thumb_img' rel='images/02.jpg'/>
		 <img src='images/03.jpg' width='80' height='50' border='0' class='thumb_img' rel='images/03.jpg'/>
		 <img src='images/04.jpg' width='80' height='50' border='0' class='thumb_img' rel='images/04.jpg'/>
		 <img src='images/05.jpg' width='80' height='50' border='0' class='thumb_img' rel='images/05.jpg'/>
		 <img src='images/06.jpg' width='80' height='50' border='0' class='thumb_img' rel='images/06.jpg'/>
		 </div>
		<img src='images/gobottom.gif' width='100' height='14' id='gobottom' alt='top'/>
		</td>
	</tr>
	</table>
	</br>
	<p>&nbsp;</p>
	</body>
</html>
 <script type='text/javascript'>
    function $(e) {     
	  return document.getElementById(e);
	  }
	document.getElementsByClassName=function(cl){
	  var retnode=[];
	  var myclass=new RegExp('\\b'+cl+'\\b');
	  var elem=this.getElementsByTagName('*');
	  for(var i=0;i<elem.length;i++){
	    var classes=elem[i].className;
		if(myclass.test(classes))
		retnode.push(elem[i]);
		}
	  return retnode;
	}
	var MyMar;
	var main=0;
	var speed=1;
	var spec=20;
	var ipath='images/';
	var thumbs=document.getElementsByClassName('thumb_img');
	for (var i=0;i<thumbs.length;i++){
	 thumbs[i].onmouseover=function(){
	    $('main_img').src=this.src;
	};
	thumbs[i].onclick=function(){
	    $('main_img').src=this.src;
	   }
	}
	$('main_img').onclick=function(){
	   location=this.link;
	 }
	$('gotop').onmouseover=function(){
	   this.src=ipath+'gotop2.gif';
	   MyMar=setInterval(gotop,speed);
	 }
	$('gotop').onclick=function(){
	   var main_src=$('main_img').src;
	   for(var i=0;i<thumbs.length;i++){
            if(main_src==thumbs[i].src)
			 $('main_img').src=thumbs[i-1].src;
			}
	 }
	$('gotop').onmouseout=function(){
	   this.src=ipath+'gotop.gif';
	   clearInterval(MyMar);
	 }
	$('gobottom').onmouseover=function(){
	  this.src=ipath+'gobottom2.gif';
	  MyMar=setInterval(gobottom,speed);
	 }
	 $('gobottom').onmouseout=function(){
	  this.src=ipath+'gobottom.gif';
	  clearInterval(MyMar);
	 }
	 $('gobottom').onclick=function(){
	   var main_src=$('main_img').src;
	   for(var i=0;i<thumbs.length;i++){
            if(main_src==thumbs[i].src)
			 $('main_img').src=thumbs[i+1].src;
			}
	 }
	 function gotop(){
	   $('showArea').scrollTop-=spec;
	  }
	 function gobottom(){
	   $('showArea').scrollTop+=spec;
	  }
  </script>

分享到：