，当鼠标点击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> </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].οnmοuseοver=function(){ $('main_img').src=this.src; }; thumbs[i].οnclick=function(){ $('main_img').src=this.src; } } $('main_img').οnclick=function(){ location=this.link; } $('gotop').οnmοuseοver=function(){ this.src=ipath+'gotop2.gif'; MyMar=setInterval(gotop,speed); } $('gotop').οnclick=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').οnmοuseοut=function(){ this.src=ipath+'gotop.gif'; clearInterval(MyMar); } $('gobottom').οnmοuseοver=function(){ this.src=ipath+'gobottom2.gif'; MyMar=setInterval(gobottom,speed); } $('gobottom').οnmοuseοut=function(){ this.src=ipath+'gobottom.gif'; clearInterval(MyMar); } $('gobottom').οnclick=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>
<wbr></wbr>
3780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
