论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

Javascript教程_图片浏览上添加鼠标点击转换到下一张图片源码教程

文章类别:Javascript | 发表日期:2010-4-29 9:35:56

Javascript教程_图片浏览上添加鼠标点击转换到下一张图片源码教程

<html>
<head>
<title>无标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_displayStatusMsg(msgStr) { //v1.0
  status=msgStr;
  document.MM_returnValue = true;
}
//-->
</script>
<link href="nt001.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.STYLE3 {font-size: 12px}
body {
 background-image: url(images/bg_001.png);
}
.STYLE11 {
 font-size: 16px;
 color: #333333;
 font-weight: bold;
}
.STYLE12 {
 color: #0000FF;
 font-size: 12px;
 cursor: hand;
}
-->
</style>
<style>
img {border:none}
img.thumb_img {cursor:pointer;display: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}
.STYLE13 {
 font-size: 16px;
 font-weight: bold;
}
.STYLE15 {font-size: 12}
.STYLE17 {font-size: 14px}
.STYLE19 {font-size: 14}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
}
a:active {
 text-decoration: none;
}
</style>
</head>
<body onLoad="MM_preloadImages('images/page_05.jpg','images/page_006.jpg')" onmouseover="MM_displayStatusMsg('隐去');return document.MM_returnValue">
<table width="890" height="682" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="121" colspan="2"><div align="center">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="888" height="119">
        <param name="movie" value="/flash/logo.swf">
        <param name="quality" value="high">
        <embed src="/flash/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="888" height="119"></embed>
      </object>
    </div></td>
  </tr>
  <tr>
    <td height="40" colspan="2"><table width="888" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="111"><a href="index.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_05.jpg" alt="" name="Image2" width="111" height="38" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','images/page_005.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="111"><a href="nt_jianjie.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_06.jpg" alt="" name="Image3" width="111" height="38" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/page_006.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="111"> <a href="nt_rongyu.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_08.jpg" alt="" name="Image4" width="111" height="38" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/page_008.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="111"> <a href="#" onFocus="if(this.blur)this.blur()"></a><a href="nt_fuwu.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_09.jpg" alt="" name="Image5" width="111" height="38" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','images/page_009.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="111"><a href="nt_zixun.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_10.jpg" alt="" name="Image6" width="111" height="38" border="0" id="Image6" onMouseOver="MM_swapImage('Image6','','images/page_010.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="111"><a href="nt_hezuo.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_13.jpg" alt="" name="Image11" width="111" height="38" border="0" id="Image11" onMouseOver="MM_swapImage('Image11','','images/page_013.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="111"><a href="nt_lianxi.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_12.jpg" alt="" name="Image8" width="111" height="38" border="0" id="Image8" onMouseOver="MM_swapImage('Image8','','images/page_012.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        <td width="222"><a href="nt_rencai.asp" onFocus="if(this.blur)this.blur()"><img src="images/page_18.jpg" alt="" name="Image10" width="111" height="38" border="0" id="Image9" onMouseOver="MM_swapImage('Image10','','images/page_018.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="214" rowspan="2" align="center" valign="top"><table width="209" height="141" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" valign="top"><table width="208" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td height="45"><img src="/images/tuzhang.jpg" width="208" height="45" /></td>
          </tr>
          <tr>
            <td align="center" valign="top" background="images/leftlist_bg.jpg"><script language="JavaScript" type="text/javascript" id="clientEventHandlersJS">
<!--
var number=6;
function LMYC() {
var lbmc;
//var treePic;
    for (i=1;i<=number;i++) {
        lbmc = eval('LM' + i);
        //treePic = eval('treePic'+i);
        //treePic.src = 'images/file.gif';
        lbmc.style.display = 'none';
    }
}
 
function ShowFLT(i) {
    lbmc = eval('LM' + i);
    //treePic = eval('treePic' + i)
    if (lbmc.style.display == 'none') {
        LMYC();
        //treePic.src = 'images/nofile.gif';
        lbmc.style.display = '';
    }
    else {
        //treePic.src = 'images/file.gif';
        lbmc.style.display = 'none';
    }
}
//-->
        </script>
                <table cellspacing="0" cellpadding="0" width="88%" border="0">
                  <tr>
                    <td style="PADDING-LEFT: 20px" background="background" height="23"><a href="javascript:void(null)" class="STYLE13" onClick="javascript:ShowFLT(1)">仓库内部环境</a> </td>
                  </tr>
                  <tr id="LM1">
                    <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="仓库场地" href="ck_changdi.asp" target="_parent"> 仓库场地</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="货物堆存" href="ck_duicun.asp" target="_parent"> 货物堆存</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="挂衣装卸" href="ck_zhuangxie.asp" target="_parent"> 挂衣装卸</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="挂衣存放" href="ck_cunfang.asp" target="_parent"> 挂衣存放</a> </td>
                        </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td style="PADDING-LEFT: 20px" background="background" height="23"><a href="javascript:void(null)" class="STYLE13" onClick="javascript:ShowFLT(2)"> 仓库安防设施</a> </td>
                  </tr>
                  <tr id="LM2"style="DISPLAY: none">
                    <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="消防演习" href="ck_yanxi.asp" target="_parent"> 消防演习</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="安防设施" href="ck_anfang.asp" target="_parent"> 安防设施</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a title="安防警示语" href="ck_jingshiyu.asp" target="_parent"> 安防警示语</a> </td>
                        </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td style="PADDING-LEFT: 20px" background="background" height="23"><a href="javascript:void(null)" class="STYLE13" onClick="javascript:ShowFLT(3)"> 仓库生产工具</a> </td>
                  </tr>
                  <tr id="LM3" style="DISPLAY: none">
                    <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_jidong.asp" title="机动设备" target="_parent" >机械设备</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_tuopan.asp" title="托盘设备" target="_parent" >托盘设备</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_yishi.asp" title="交车仪式" target="_parent" >交车仪式</a> </td>
                        </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td style="PADDING-LEFT: 20px" background="background" height="23"><a href="javascript:void(null)" class="STYLE13" onClick="javascript:ShowFLT(4)"> 仓库流程展示</a> </td>
                  </tr>
                  <tr id="LM4" style="DISPLAY: none">
                    <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_shouhuo.asp" title="收货流程" target="_parent" class="STYLE19"> 收货流程</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_huosun.asp" title="货损处理" target="_parent" class="STYLE19"> 货损处理</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_zhijian.asp" title="质检流程" target="_parent" class="STYLE19"> 质检流程</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_chanhuo.asp" title="铲货流程" target="_parent" class="STYLE19"> 铲货流程</a> </td>
                        </tr>
                        <tr>
                          <td height="23" class="STYLE17" style="PADDING-LEFT: 40px"><a href="ck_zhuangxiang.asp" title="装箱流程" target="_parent" class="STYLE17"> 装箱流程</a> </td>
                        </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td style="PADDING-LEFT: 20px" background="background" height="23"><a href="javascript:void(null)" class="STYLE13" onClick="javascript:ShowFLT(5)">仓库增值服务</a> </td>
                  </tr>
                  <tr id="LM5" style="DISPLAY: none">
                    <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                          <td style="PADDING-LEFT: 40px" height="23"><a href="ck_saomiao.asp" title="扫描服务" target="_parent" class="STYLE17"> 扫描服务</a> </td>
                        </tr>
                        <tr>
                          <td style="PADDING-LEFT: 40px" height="23"><a href="ck_tiemai.asp" title="贴唛服务" target="_parent" class="STYLE17"> 贴唛服务</a> </td>
                        </tr>
                        <tr>
                          <td style="PADDING-LEFT: 40px" height="23"><a href="ck_huatuo.asp" title="打滑托服务" target="_parent" class="STYLE17"> 打滑托服务</a> </td>
                        </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td style="PADDING-LEFT: 20px" background="background" height="23"><a href="nt_jianjie.asp" class="STYLE13" > 返回公司简介</a> </td>
                  </tr>
                  <tr id="LM6" style="DISPLAY: none"> </tr>
              </table></td>
          </tr>
          <tr>
            <td height="17"><img height="30" src="images/tuzhang_1.jpg" width="208" /></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td align="center" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="208" height="238">
          <param name="movie" value="/flash/baiyechuang_2.swf">
          <param name="quality" value="high">
          <embed src="/flash/baiyechuang_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="208" height="238"></embed>
        </object></td>
      </tr>
    </table></td>
    <td width="676" height="312" align="left" valign="top"><table width="672" border="0" align="center" cellpadding="0" cellspacing="5">
      <tr>
        <td height="35" colspan="2" align="left" background="images/HF_001.jpg" class="STYLE11">仓库场地</td>
      </tr>
      <tr>
        <td width="550" align="center"><img src="images_1/changdi_1.jpg" alt="" name="main_img" width="550" height="400" border="0" id="main_img" rel="images_1/changdi_1.jpg"link="http://192.168.7.26/jj_cangku.asp" /></td>
        <td width="110" align="center" valign="top"><img src="images/gotop2.gif" width="100" height="14" id="gotop"/>
          <div id="showArea"> <img src="images_1/changdi_1.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_1.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_2.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_2.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_3.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_3.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_4.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_4.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_5.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_5.jpg"link="http://192.168.7.26/jj_cangku.asp"/><img src="images_1/changdi_6.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_6.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_7.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_7.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_8.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_8.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_9.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_9.jpg"link="http://192.168.7.26/jj_cangku.asp"/> <img src="images_1/changdi_10.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_10.jpg"link="http://192.168.7.26/jj_cangku.asp"/></div>
          <img src="images/gobottom2.gif" width="100" height="14" id="gobottom" /></td></tr>
    </table></td>
  </tr>
 </table>
</body>
</html>
<script language="javascript" 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 speed = 1; //速度,越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
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.rel; $('main_img').link=this.link;};
    //thumbs[i].onclick = function () {location = this.link}鼠标点击连接
}
//$('main_img').onclick = function () {location = this.link;}鼠标点击连接
$('gotop').onmouseover = function() {this.src = ipath + 'gotop.gif'; MyMar=setInterval(gotop,speed);}
$('gotop').onmouseout = function() {this.src = ipath + 'gotop2.gif'; clearInterval(MyMar);}
$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom.gif'; MyMar=setInterval(gobottom,speed);}
$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom2.gif'; clearInterval(MyMar);}
function gotop() {$('showArea').scrollTop-=spec;}
function gobottom() {$('showArea').scrollTop+=spec;}
</script>
我想在图片浏览上添加鼠标点击转换到下一张图片的事件,不知各位有什么好的方法
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058