Question

我有一个旋转木马滑块，当我点击拇指时，需要在大横幅中加载图像。我怎样才能做到这一点？

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

  <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的每个方法循环遍历轮播中的每个图像，然后使用具有正确src图像的图像标记更新其中的html。

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

Fiddle

点击拇指显示大图

1 个答案: