点击赞显示大图

Question

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

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

Example here

New other example is here!

<div class="big"> 
    <img src="http://placehold.it/476x300&text=first" /> 
    <img src="http://placehold.it/476x300&text=sec" /> 
    <img src="http://placehold.it/476x300&text=third" /> 
    <img src="http://placehold.it/476x300&text=four" /> 
    <img src="http://placehold.it/476x300&text=five" /> 
    </div> 

    <div class="owl-carousel small"> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=first" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=sec" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=third" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=four" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=five" /> 
    </div> 
    </div> 

脚本：

$(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 
      } 
     } 
     }) 
    }) 

Answer 1

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

我看你装的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 + '\'/>'); 
    }); 
    }); 
}); 

我们正在使用通过转盘每个图像jQuery的每个方法来循环，然后更新里面的html的使用具有对图像的正确SRC图像标记。

或者，您可以显示/隐藏.big容器中的图像，就像您的html已经显示的一样。这可能会更好地按照您的意愿淡入淡出图像。

Fiddle