【发布时间】：2019-05-05 19:31:25
【问题描述】：
情况：我创建了一个图片库，并在右侧创建了一个图片轮播。在图像轮播的左/右侧，我有 2 个箭头，我可以从左/右看到图像。当鼠标悬停在轮播中的一张图像上时，较大的图像应该用悬停的图像进行更改，而当鼠标悬停时，旧的大图像应该返回。
问题：onmouseover 仅适用于行首的第一张图片。因此，如果您将鼠标悬停在顶部的第一个图像上，则大图像会发生变化。此外，如果您单击右侧的箭头，然后将其悬停在第一个图像上，它就可以工作。但是，如果您将鼠标悬停在其他图像上，则无法正常工作。
我尝试了什么：我尝试了不同的版本和组合来从 div carouse-item 访问图像。我尝试使用 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>【问题讨论】：
-
你能解释一下为什么你必须在每个
carousel-item中添加一个thumbnail，然后循环并在每个carousel-item中附加3 个thumbnail。 -
因为我在轮播中大约有 18 张图片，我想一次只移动一张图片。另外，我有多个轮播。是不是有什么问题？
-
我仍然无法理解你的意思。请看一下thisfiddle，看看这种方法有什么问题
标签： javascript jquery html css