Question

我认为这很简单，但是我不能在我的缩略图图像之间桥接来自Div中的一系列图像。

我从变量中看到的一个例子中借鉴了想法。

基本上，我有一个预先加载了第一张图像的Div，然后想要将初始图像替换为下面缩略图中选择的内容。

我有一个数组，并且我认为我会索引列表项（HTML中显示的缩略图方法）;只是不能让它们同步（对变量来说很新 - 如果有人对学习变量有任何提示或可靠的资源，而且语法也很好）。

HTML

<div class="gallery">
    <img class="maxwidth" id="switcher" src="Images/samlrg.jpg" />
</div>
<div class="thumbs">
    <ul class="galleryThumbs">
        <li class="gallery">
            <img class="thumb" src="Images/thumbs/sam.jpg" />
        </li>
        <li class="gallery">
            <img class="thumb" src="Images/thumbs/cat.jpg" />
        </li>
        <li class="gallery">
            <img class="thumb" src="Images/thumbs/horse.jpg" />
        </li>
    </ul>
</div>

Jquery

$(function () {
    var imageName = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"];
    var indexNum = ("li.gallery").index();
    var indexed = imageName + indexNum;

    $("img").click(function () {
        $("#switcher").attr("src", indexed);

        if (indexNum > 2)(indexNum = 0);

    });
});

Answer 1

你需要获取图像索引，你可以使用jQuery的.index（）函数来完成。找到被单击的图像的索引，它们会查找数组中的项目：

 var imageName = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"];

        $("img").click(function() {
            //Get our image index from all images in the gallery
            var myIndex = $(".gallery img").index(this) - 1;
            $("#switcher").attr("src", imageName[myIndex]);
        });

您还可以通过上述图像数组并将全尺寸图像设置为缩略图的数据属性来使其更加清晰：

 $(function() {
   $("img").click(function() {
     var $input = $(this);
     $("#switcher").attr("src", $input.attr("data-large"));
   });
 });

<div class="gallery">
  <img class="maxwidth" id="switcher" src="Images/samlrg.jpg" />
</div>
<div class="thumbs">
  <ul class="galleryThumbs">
    <li class="gallery">
      <img class="thumb" src="Images/thumbs/sam.jpg" data-large="Images/samlrg.jpg" />
    </li>
    <li class="gallery">
      <img class="thumb" src="Images/thumbs/cat.jpg" data-large="Images/catlrg.jpg" />
    </li>
    <li class="gallery">
      <img class="thumb" src="Images/thumbs/horse.jpg" data-large="Images/horselrg.jpg" />
    </li>
  </ul>
</div>

Answer 2

你很亲密。我不确定你还想做什么，但这包括简单的图像点击器：

$(function () {
    var images = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"];

    $("img").click(function () {
        var index = $(this).parent().index();

        $('#switcher').attr('src', images[index]);
    });
});

<强> Demo

Answer 3

有两个jquery结构可以帮助你：首先你可以像这样抓住被点击的元素：

$("img").click(function () {
    $(this) // will refer to the image element clicked
});

有关详细信息，请参阅the docs。

其次，您可以使用jQuery的data() function来访问与元素相关联的数据：

$("img").click(function () {
    //gives you whatever you stored under the key 'index'
    var index = $(this).data('index'); 
});

但是，您必须以某种方式将数据存储在元素中。（您可能还希望保存图像URL而不是索引）。因此，无论何时创建元素并对其进行引用，您都可以像这样附加数据：

element.data('key', value);

如同@MariusSoft的答案所示，您还可以通过HTML标记中的属性设置数据。

Answer 4

您需要向img.thumb添加hander并读取已点击元素的索引

var imageName = ["Images/samlrg.jpg", "Images/catlrg.jpg", "Images/horselrg.jpg"];

$("img.thumb").click(function () {
    var imageUrl=imageName[$("img.thumb").index(this)];
    $("#switcher").attr("src", imageUrl);
});

示例：http://jsfiddle.net/lTasty/51khoatj/

Answer 5

我不确定您的HTML是如何生成的，但如果它是动态的，您可以执行以下操作：

<div class="gallery">
    <img class="maxwidth" id="switcher" src="Images/samlrg.jpg" />
</div>
<div class="thumbs">
    <ul class="galleryThumbs">
        <li class="gallery">
            <img class="thumb" src="Images/thumbs/sam.jpg" altSrc="Images/samlrg.jpg" />
        </li>
        <li class="gallery">
            <img class="thumb" src="Images/thumbs/cat.jpg" altSrc="Images/catlrg.jpg" />
        </li>
        <li class="gallery">
            <img class="thumb" src="Images/thumbs/horse.jpg" altSrc="Images/horselrg.jpg" />
        </li>
    </ul>
</div>

<script>
    $(document).ready(function() {

        //When someone clicks any image with the class "thumb"
        $(".thumb").click(function () {
            //Get that image's altSrc attribute value
            var altSrc = $(this).attr("altSrc");

            //Set the main images src to that value        
            $("#switcher").attr("src", altSrc);
        });
    });
</script>

基本上将备用图像存储为每个缩略图的自定义属性，然后使用它来更改主图像上的src属性。没有必要的数组。

我想点击缩略图来显示数组中的图像

5 个答案: