Question

我在网站上使用其中两个：https://0.s3.envato.com/files/74303492/index.html滚动脚本。这看起来如下：

http://www.thinktwice.nl/slider.jpg

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

我想在点击缩略图时实现这一点，它会显示在大图片区域中。

大图片如下所示：

<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”。

如果要使用延迟加载功能，脚本需要以这种方式执行。当点击小缩略图时，我可以轻松使用更改大图片“src”的javascript。但是使用data-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>

工作javascript：

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

但正如我所说，我需要以懒惰的方式加载，因为大约有40多个800x600px图像加载。

Jquery，点击较小的图片显示大图片

0 个答案: