[英]Thumbnail gallery image switching
function init(){
th=document.getElementById('divId').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('mainImage').src=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
我主要是这里的 JS 新手,我的主要问题是特别是 JS 部分,请帮忙,我已经研究了 4 天了。 代码应该做的是显示顶部图像和底部的 5 个缩略图。 单击时,缩略图应通过与当前图像切换来显示。
这是代码的 HTML 部分:
<html>
<head>
<link href='gallery.css' type="text/css" rel ='stylesheet'/>
<title>Gallery</title>
</head>
<body>
<img id="mainImage" src="Images/alphamon.jpg"/>
<br />
<div align='center' id="divId" >
<img class="imgStyle" src="Images/alphamon.jpg" />
<img class="imgStyle" src="Images/gallantmon.jpg" />
<img class="imgStyle" src="Images/omnimon.jpg" />
<img class="imgStyle" src="Images/omnimon_2.jpg" />
<img class="imgStyle" src="Images/royal_knights.jpg" />
</div>
<script type='text/javascript' src='gallery.js'></script>
</body>
</html>
一切都容易多了。
function swapImage(url){
/* no need this code
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
*/
document.getElementById('mainImage').src=url;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.