Javascript 制作一个简单的图像切换器

我知道有很多jQuery脚本已经准备好在这里实现类似的东西，我正试图将它们整合在一起，但我想让它尽可能简单。基本上，当单击列表的每个图像拇指时，主图像仅显示更大的相应图像

所以，这是我的问题。有没有人有这样一个简单的脚本

        <div class="main_image">
           <img src="<?=href['imagem'];?>" /> 
        </div>

        <ul>

            <li>
                <a href="img01.jpg"><img src="img01.jpg" alt="Image Name" /></a>
            </li>
            <li>
                <a href="img02.jpg"><img src="img02.jpg" alt="Image Name" /></a>
            </li>
        </ul>

" /> 

这很简单，你可以将你的缩略图存储在一个名为“小”的文件夹中，将大图像存储在“大”文件夹中，然后你就有了如下功能：

<ul>

    <li>
        <img class="small" src="small/img01.jpg" alt="Image Name" />
    </li>
    <li>
        <img class="small" src="small/img02.jpg" alt="Image Name" />
    </li>
</ul>
<div class="main_image">
   <img id="large" src="" /> 
</div>

---

这很简单，你可以将你的缩略图存储在一个名为“小”的文件夹中，将大图像存储在“大”文件夹中，然后你就可以得到如下内容：

<ul>

    <li>
        <img class="small" src="small/img01.jpg" alt="Image Name" />
    </li>
    <li>
        <img class="small" src="small/img02.jpg" alt="Image Name" />
    </li>
</ul>
<div class="main_image">
   <img id="large" src="" /> 
</div>

---

非常简单，实际上可以稍微简化代码

//不要在图像周围放置标签，因为您只需要取消导航






//单击列表项图像时，获取主图像并更改其src attr
$（'li img'）。单击（函数（）{
$（'#main'）.attr（'src'，$（this.attr（'src'））；
});

非常简单，实际上您可以稍微简化代码

//不要在图像周围放置标签，因为您只需要取消导航






//单击列表项图像时，获取主图像并更改其src attr
$（'li img'）。单击（函数（）{
$（'#main'）.attr（'src'，$（this.attr（'src'））；
});

也许他的意思是使用锚的名称，以便访问者可以跳转到图像？哦，嗯，也许他想在浏览器中打开图像？伙计们。这就是我试图实现的地方。P@hakim sina-它们不同。我的不依赖于两个单独的图像文件夹。它只是将src属性从缩略图移动到mai嗯，我喜欢你的，因为如果你真的有缩略图的话，这是一个更好的解决方案。哦，我在看到你的答案之前写了我的答案，以防你认为我是一个不好的点偷猎者。也许他是指使用锚的名称，以便访问者可以跳转到一个图像？哦，嗯，也许他想在浏览器中打开该图像？伙计们……这就是我的目的我正在尝试实现这一点：P@hakim sina-它们是不同的。我的不依赖于两个单独的图像文件夹。它只是将src属性从缩略图移动到主img。如果你真的有缩略图，我会选择你的，因为这是一个更好的解决方案。哦，我实际上在看到你的答案之前写了我的，以防万一你认为我是个无赖d点偷猎者。单击时图像是否应在浏览器中打开？否。想法是在单击列表项时更改主图像div上的图像。下面是我尝试应用此方法的地方：单击时图像是否应在浏览器中打开？否。想法是在单击列表项时更改主图像div上的图像。这就是我要做的尝试应用：这很好，但我实际上尝试使用相同的图像作为缩略图和主图像。我将在css上更改它。这很好，但我实际上尝试使用相同的图像作为缩略图和主图像。我将在css上更改它。

<div class="main_image">
   <img id="main" src="" /> 
</div>

//dont put <a> tags around images because you will just need to cancel navigation    
<ul>
    <li>
        <img src="http://placehold.it/200x300" alt="Image Name" />
    </li>
    <li>
        <img src="http://placehold.it/300x400" alt="Image Name" />
    </li>
</ul>

//when a list item image is clicked, take your main image and change its src attr
$('li img').click( function() {
    $('#main').attr('src', $(this).attr('src'));
});