缩略图库图片切换

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);

I'm mainly new to JS here, my main issue is specifically the JS section please help, I've been going at this for 4 days now.我主要是这里的 JS 新手，我的主要问题是特别是 JS 部分，请帮忙，我已经研究了 4 天了。 What the code should do is display a top image, and 5 thumbnails at the bottom.代码应该做的是显示顶部图像和底部的 5 个缩略图。 When clicked the thumbnails should display on to by switching with the current image.单击时，缩略图应通过与当前图像切换来显示。

Here is the HTML section of the code:这是代码的 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

Everything is much easier.一切都容易多了。

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 个解决方案

解决方案1
0 2017-11-06 01:36:48

缩略图库图片切换

问题描述

1 个解决方案

解决方案1 0 2017-11-06 01:36:48

解决方案1
0 2017-11-06 01:36:48