Question

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>

Answer 1

一切都更容易。

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;

 }

缩略图库不工作

1 个答案: