Question

我正在尝试制作一个非常简单的图像切换器，基本上当单击列表中的项目时，div上的图片会发生变化。

我无法让它发挥作用。你能给我一个关于如何使这个代码在下面工作的解决方案吗？

<head>
   <style>
      li img { height: 30px; border: 1px dashed blue;}
      .main_image { border: 1px solid black; height: 500px; width: 500px; }
   </style>
   <script type="text/javascript">
     $('li img').click( function() {
       $('#main').attr('src', $(this).attr('src'));
     });
   </script>
</head>
<body>
   <div class="main_image">
      <img id="main" src="" /> 
   </div>

   <ul>
       <li>
           <img src="http://placehold.it/200x300" alt="Image Name" />
       </li>
       <li>
           <img src="http://placehold.it/300x400" alt="Image Name" />
       </li>
   </ul>
</body>

Answer 1

加价：

<div class="gallery">
  <img src="http://placehold.it/600x450" alt="" class="main" />
  <ul class="thumbnails">
    <li><a href="http://placehold.it/600x450"><img src="http://placehold.it/100x75" alt="" /></a></li>
    <li><a href="http://placehold.it/600x450"><img src="http://placehold.it/100x75" alt="" /></a></li>
    <li><a href="http://placehold.it/600x450"><img src="http://placehold.it/100x75" alt="" /></a></li>
    ...
  </ul>
</div>

JavaScript：

$('.gallery').each(function () {
    var gallery = this;
    $('.thumbnails a', gallery).click(function (e) {
        e.preventDefault();
        $('img.main', gallery).attr('src', $(this).attr('href'));
    });
});

这适用于<div>中包含gallery类的任何主图像/缩略图组合，如上述标记所示。

例如，您可以在同一页面上拥有多个图库，上面的jQuery代码段将为每个图库独立工作。

Answer 2

您可以使用类似

的内容

$("li img").click(
    function(){
        var imgSrc = $(this).attr("src");
        $("img#main").attr("src", imgSrc);
    }
);

未经测试但应该工作:)
Shai。

制作图像切换器

2 个答案: