Javascript 点击拇指显示大图像

我有一个旋转木马滑块， 当我点击拇指时，需要将图像加载到大横幅中。 我该怎么做

它需要平滑，它显示了一个大的图像，当点击一个拇指，拇指需要淡入现有的图像。但首先我需要让它工作起来

---

您需要将事件处理程序附加到每个图像

我看到您正在加载jQuery，这使它变得很好和简单

$(function(){
  $(".big img:eq(0)").nextAll().hide();
  $(".es-slides .es-slide-inner img").click(function(e){
    var index = $(this).index();
    $(".big img").eq(index).show().siblings().hide();
  });    

  $('#basic_slider img').each(function(i,image){
    $(image).on('click', function(){
      $('.big').html('<img src=\''+ image.src + '\'/>');
    });
  });
});

$（函数（）{
$（“.big-img:eq（0）”）.nextAll（）.hide（）；
$（“.es slides.es slide internal img”）。单击（函数（e）{
var index=$（this.index（）；
$（“.big img”）.eq（index.show（）.sides（）.hide（）；
});    
$（“#基本#U滑块img”）。每个（函数（i，图像）{
$（图像）。在（'单击'，函数（）上）{
$（'.big'）.html（''）；
});
});
});

我们使用jqueryeach方法循环遍历旋转木马中的每个图像，然后使用具有正确图像src的图像标记更新图像中的html

或者，您可以在.big容器中显示/隐藏图像，就像您的html已经显示的那样。这可能会更好地为淡入淡出图像，如你所愿

---

我找到了一把好小提琴，所有这些都需要淡入而不是滑动：任何帮助都将不胜感激！我已经更新了小提琴；真的需要一个淡入/淡出选项。谢谢你，亚历克斯。

    $(document).ready(function() {
      $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        responsiveClass: true,
        responsive: {
          0: {
            items: 2,
            nav: false
          },
          600: {
            items: 3,
            nav: false
          },
          1000: {
            items: 4,
            nav: false,
            loop: false,
            margin: 20
          }
        }
      })
    })

$(function(){
  $(".big img:eq(0)").nextAll().hide();
  $(".es-slides .es-slide-inner img").click(function(e){
    var index = $(this).index();
    $(".big img").eq(index).show().siblings().hide();
  });    

  $('#basic_slider img').each(function(i,image){
    $(image).on('click', function(){
      $('.big').html('<img src=\''+ image.src + '\'/>');
    });
  });
});