Question

如何在一个页面上制作多个图像切换器？

这是我尝试过的，适用于一个图像切换器。

注意：我想对缩略图和主图像使用相同的图像。请按照我的想法。：）

<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 id="image-switcher-001">
   <div class="main_image">
      <img class="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>
  </div>
  <div id="image-switcher-002">
   <div class="main_image">
      <img class="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>
  </div>
 </body>

Answer 1

您的问题是$('.main')部分选择所有 .main元素。

而不是$('.main')，请尝试$(this).closest('div').find('.main')。

将DOM树上升到最近的<div/>，然后下到其中的.main。

一页中的多个图像切换器

1 个答案: