从图库轮播中更改大图onmouseover缩略图

Question

情况 ：我创建了一个图片库，并在右侧创建了图片轮播。 在图像轮播的左侧/右侧，我有2个箭头，我可以从左侧/右侧看到图像。 当鼠标悬停在转盘上的一个图像时，较大的图像应随悬停的图像一起更改，而当鼠标悬停时，旧的大图像应返回。

问题 ：onmouseover仅适用于该行顶部的第一个图像。 因此，如果将鼠标悬停在顶部的第一个图像上，则大图像将被更改。 另外，如果单击右侧的箭头，然后将鼠标悬停在第一张图像上，它将起作用。 但是，如果将鼠标悬停在其他图像上，将无法正常工作。

我尝试过的事情 ：我尝试了不同的版本和组合，以从div carouse-item访问图像。 我试图通过使用var source = $（this）.attr（'src'）;来接收悬停图像的图像源。 然后通过更新主图像源 $（'。main'）。attr（'src'，源代码）;

代码 ：很抱歉代码太多，但否则无法为您显示。 另外，如果无法使用，请参见JSFiddle： http : //jsfiddle.net/cpL85t2h/

 var original = $('.main').attr('src'); $('.thumbnail').mouseover(function() { // retrieve image source var source = $(this).attr('src'); // retrieve image source of hovered image $('.main').attr('src', source); // update main image source }) .mouseout(function() { $('.main').attr('src', original); // restore original image source }); //This is for the gallery carousel $('.carousel .carousel-item').each(function() { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length > 0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); 

 body { background: green; padding: 20px; font-family: Helvetica; } .column #gallery-image { width: 200px; height: 215px; object-fit: cover; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .gallery-item { width: 200px; height: 215px; float: left; padding: 0px; margin-bottom: 6%; } #img-responsive { width: 60px; height: 50px; } .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { transform: translateX(0); } .item-container { width: 96%; display: block; flex-direction: row; align-items: center; margin-bottom: 4%; margin-left: -0.5%; margin-top: 5%; padding-bottom: 5%; border-bottom: 1px solid #ccc; } #img-responsive { width: 60px; height: 50px; } .image-carousel { display: block; width: 34%; margin-left: 14%; margin-bottom: 5%; } .col-4 { position: relative; width: 100%; min-height: 1px; padding-right: 3px; padding-left: 3px } .carousel-control-prev { position: absolute; bottom: 0; left: 0; top: auto; padding-top: 15px; padding-bottom: 15px; padding-right: 7px; margin-bottom: 1%; margin-left: -8%; color: black; font-size: 17px; text-decoration: none; } .carousel-control-next { position: absolute; bottom: 0; right: 0; padding-top: 15px; padding-bottom: 15px; padding-left: 7px; top: auto; margin-bottom: 1%; margin-right: -8%; color: black; font-size: 17px; text-decoration: none; } 

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"></script> <div class="gallery row clearfix"> <div class="row"> <div class="column"> <div class="products-content"> <div class="gallery-item"> <img src="https://old.intersport.co.uk/images/puma-mens-evo-training-yellow-football-t-shirt-p2092-5311_image.jpg" id="gallery-image" class="main"> </div> <div class="image-carousel"> <div class="row"> <div id="recipeCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="thumbnail" src="https://5.imimg.com/data5/EJ/GB/MY-2190204/football-sports-t-shirt-500x500.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://old.intersport.co.uk/images/puma-kids-evotrg-red-football-training-t-shirt-p5342-14566_image.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/517K4f5BthL._SL1000_.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://media-11teamsports.de/ArticleOriginals/adidas-originals-sc-t-shirt-football-damen-weiss-lifestyle-streetwear-trend-alltag-casual-freizeit-ce1669.jpg" id="img-responsive"> </div> </div> <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev"> <span class="fa fa-chevron-left" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next"> <span class="fa fa-chevron-right" aria-hidden="true"></span> </a> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

我试图解决您的问题。 使用$ {document）.ready

 $(document).ready(function(e) { var original = $('.main').attr('src'); $('.thumbnail').mouseover(function() { // retrieve image source var source = $(this).attr('src'); // retrieve image source of hovered image $('.main').attr('src', source); // update main image source }) .mouseout(function() { $('.main').attr('src', original); // restore original image source }); }); //This is for the gallery carousel $('.carousel .carousel-item').each(function() { var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length > 0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); }}); 

 body { background: green; padding: 20px; font-family: Helvetica; } .column #gallery-image { width: 200px; height: 215px; object-fit: cover; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .gallery-item { width: 200px; height: 215px; float: left; padding: 0px; margin-bottom: 6%; } #img-responsive { width: 60px; height: 50px; } .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { transform: translateX(0); } .item-container { width: 96%; display: block; flex-direction: row; align-items: center; margin-bottom: 4%; margin-left: -0.5%; margin-top: 5%; padding-bottom: 5%; border-bottom: 1px solid #ccc; } #img-responsive { width: 60px; height: 50px; } .image-carousel { display: block; width: 34%; margin-left: 14%; margin-bottom: 5%; } .col-4 { position: relative; width: 100%; min-height: 1px; padding-right: 3px; padding-left: 3px } .carousel-control-prev { position: absolute; bottom: 0; left: 0; top: auto; padding-top: 15px; padding-bottom: 15px; padding-right: 7px; margin-bottom: 1%; margin-left: -8%; color: black; font-size: 17px; text-decoration: none; } .carousel-control-next { position: absolute; bottom: 0; right: 0; padding-top: 15px; padding-bottom: 15px; padding-left: 7px; top: auto; margin-bottom: 1%; margin-right: -8%; color: black; font-size: 17px; text-decoration: none; } 

 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <div class="gallery row clearfix"> <div class="row"> <div class="column"> <div class="products-content"> <div class="gallery-item"> <img src="https://old.intersport.co.uk/images/puma-mens-evo-training-yellow-football-t-shirt-p2092-5311_image.jpg" id="gallery-image" class="main"> </div> <div class="image-carousel"> <div class="row"> <div id="recipeCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="thumbnail" src="https://5.imimg.com/data5/EJ/GB/MY-2190204/football-sports-t-shirt-500x500.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://old.intersport.co.uk/images/puma-kids-evotrg-red-football-training-t-shirt-p5342-14566_image.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/517K4f5BthL._SL1000_.jpg" id="img-responsive"> </div> <div class="carousel-item"> <img class="thumbnail" src="https://media-11teamsports.de/ArticleOriginals/adidas-originals-sc-t-shirt-football-damen-weiss-lifestyle-streetwear-trend-alltag-casual-freizeit-ce1669.jpg" id="img-responsive"> </div> </div> <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev"> <span class="fa fa-chevron-left" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next"> <span class="fa fa-chevron-right" aria-hidden="true"></span> </a> </div> </div> </div> </div> </div> </div> </div> 

Answer 2

问题是页面加载时DOM中没有动态元素...修复第二个函数，它将起作用。

在两个功能上切换位置。

    original = $('.main').attr('src');
//This is for the gallery carousel 
$('.carousel .carousel-item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});


$('.thumbnail').mouseover(function() {
    // retrieve image source
    source = $(this).attr('src'); // retrieve image source of hovered image
    $('.main').attr('src', source); // update main image source
  })
  .mouseout(function() {
    $('.main').attr('src', original); // restore original image source
  });

还添加了类而不是ID并在CSS中进行了切换...

查看更新的小提琴