从图库轮播中更改鼠标悬停时的大图像

时间：2018-12-04 11:19:51

标签： javascript jquery html css

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

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

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

代码：很抱歉，代码太多，但否则无法为您显示。另外，如果不起作用，请参见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>

2 个答案:

答案 0 :(得分：0)

我正在尝试解决您的问题。 使用$（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>

答案 1 :(得分：0)

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

在两个功能上切换位置。

if (window.performance.navigation.type === 2) {
    window.location.reload()
}

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

See updated fiddle

相关问题
最新问题