Javascript Jquery，单击较小的图像显示较大的图像

我正在网站上使用其中的两个：滚动脚本。情况如下：

如果将鼠标移到小缩略图或大图片上，访问者将看到左右箭头在图片中滚动

我想实现的是，当你点击一个缩略图时，它会显示在大图片区域中

大图如下所示：

<ul class="ts-list">
<li data-src='images/thumbnails/website/350930_1e.jpg' id='mainImage'><img src='images/placeholder.png'></li>
<li data-src='images/thumbnails/website/350930_2e.jpg' id='mainImage'><img src='images/placeholder.png'></li>
<li data-src='images/thumbnails/website/350930_3e.jpg' id='mainImage'><img src='images/placeholder.png'></li>
<li data-src='images/thumbnails/website/350930_4e.jpg' id='mainImage'><img src='images/placeholder.png'></li>
<li data-src='images/thumbnails/website/350930_5e.jpg' id='mainImage'><img src='images/placeholder.png'></li>
</ul>

小图片如下所示：

<ul class="ts-list">                                                
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_1a.jpg'><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_2a.jpg'><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_3a.jpg'><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_4a.jpg'><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_5a.jpg'><img src='images/placeholder.png'></li>
</ul>

正如您所看到的，图像的源位于list元素中，称为data src

如果要使用延迟加载功能，脚本需要这样做。我可以很容易地使用javascript，在单击小缩略图时更改大图片的src。但是有了数据src，我就不能让它工作了。有什么想法吗？能做到吗

编辑：

如果我使用普通图像标签显示图片，则以下代码有效：

大型图片：

<ul class="ts-list">
<li><img id='mainImage' src='images/thumbnails/website/350930_1e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_2e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_3e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_4e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_5e.jpg'></li>
</ul>

<ul class="ts-list">                                                
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_1a.jpg' onclick="showImage('images/thumbnails/website/350930_1e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_2a.jpg' onclick="showImage('images/thumbnails/website/350930_2e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_3a.jpg' onclick="showImage('images/thumbnails/website/350930_3e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_4a.jpg' onclick="showImage('images/thumbnails/website/350930_4e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_5a.jpg' onclick="showImage('images/thumbnails/website/350930_5e.jpg')"><img src='images/placeholder.png'></li>
</ul>

小图片：

<ul class="ts-list">
<li><img id='mainImage' src='images/thumbnails/website/350930_1e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_2e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_3e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_4e.jpg'></li>
<li><img id='mainImage' src='images/thumbnails/website/350930_5e.jpg'></li>
</ul>

<ul class="ts-list">                                                
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_1a.jpg' onclick="showImage('images/thumbnails/website/350930_1e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_2a.jpg' onclick="showImage('images/thumbnails/website/350930_2e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_3a.jpg' onclick="showImage('images/thumbnails/website/350930_3e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_4a.jpg' onclick="showImage('images/thumbnails/website/350930_4e.jpg')"><img src='images/placeholder.png'></li>
<li style='cursor:pointer;' data-src='images/thumbnails/website/350930_5a.jpg' onclick="showImage('images/thumbnails/website/350930_5e.jpg')"><img src='images/placeholder.png'></li>
</ul>

和工作javascript：

<script type="text/javascript">  
        function showImage(image){          
            var mainImage = document.getElementById('mainImage');                    
            mainImage.src = image;
        }
</script> 

---

但正如我所说的，我需要以惰性方式加载它，因为加载的图像约为40+800x600px。

$您的选择器。data'src'将返回data-src。这肯定可以完成。你为什么不把你目前尝试使用的JavaScript，我们可以提供反馈，告诉你如何让它像你所希望的那样工作？你只能有一个大图像，并根据点击的缩略图更改其源代码。我用代码编辑了这篇文章，如果不使用数据src作为图像源代码，它就可以工作。有人愿意帮我吗？