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="#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="" 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="#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="" 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="" /></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=""/> <img src="images_1/changdi_2.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_2.jpg"link=""/> <img src="images_1/changdi_3.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_3.jpg"link=""/> <img src="images_1/changdi_4.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_4.jpg"link=""/> <img src="images_1/changdi_5.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_5.jpg"link=""/><img src="images_1/changdi_6.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_6.jpg"link=""/> <img src="images_1/changdi_7.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_7.jpg"link=""/> <img src="images_1/changdi_8.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_8.jpg"link=""/> <img src="images_1/changdi_9.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_9.jpg"link=""/> <img src="images_1/changdi_10.jpg" alt="" width="80" height="50" border="0" class="thumb_img" rel="images_1/changdi_10.jpg"link=""/></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>
我想在图片浏览上添加鼠标点击转换到下一张图片的事件,不知各位有什么好的方法
相关文章
精彩导读
热门资讯
关注我们
