将div img更改为另一个中的活动图像

Question

我有两个div我需要第一个div"border text center roughed h-100 product image"图像更改为第二个div"item slideshow"中的活动图像如何使用jquery或javascript？？注意，它只有在点击图像时才有效如何使其与活动图像动态滑动？

document.ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => {
const $img = $(e.currentTarget);
const link = $img.prop('src');
const $product_image = $('.product-image');
$product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active');
$img.addClass('active');
});
})

<div class="col-md-4 h-100">
<div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
<img itemprop="image" class="website-image h-100 w-100" src="/files/developmentandsoftware-01.svg">
</div>
<div class="item-slideshow">
<img class="item-slideshow-image mt-2" src="/files/developmentandsoftware-01.svg" alt="None">
<img class="item-slideshow-image mt-2 active" src="/files/AutomatetoSurvive-01.svg" alt="None">
<img class="item-slideshow-image mt-2" src="/files/completeSoultions-01.svg" alt="None">
</div>
</div>
</div>

Answer 1

我在slideDynamic()函数中使用了您的jQuery代码，并通过自动点击设置的3500 microseconds时间间隔进行了一些修改+添加逻辑

我希望下面的片段能对你有所帮助。

$(document).ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => {
slideDynamic(e);
});
setInterval(function(){
var  totalSlide = $('.item-slideshow-image').length-1;
var  getActiveInded = $('.item-slideshow-image.active').index();
if (totalSlide==getActiveInded) {
$('.item-slideshow-image').removeClass('active');
$('.item-slideshow-image:nth-child(1)').addClass('active').trigger('click');
}
else{
$('.item-slideshow-image.active').next().trigger('click');
}    
},3500);
});
function slideDynamic(e){
const $img = $(e.currentTarget);
const link = $img.prop('src');
const $product_image = $('.product-image');
$product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active');
$img.addClass('active');
}

.item-slideshow-image{
width: 60px;
margin-right: 5px;
}
.item-slideshow-image.active{
outline: 4px solid green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container page_content">
<div class="row">
<div class="col-sm-6 col-md-4 h-100">
<div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
<img itemprop="image" class="website-image h-100 w-100" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1">
</div>
<div class="item-slideshow">
<img class="item-slideshow-image mt-2 active" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1" alt="None">
<img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Slide2" alt="None">
<img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/000000/FFFFFF/?text=Slide3" alt="None">
</div>
</div>
</div>
</div>
</div>