我目前正在制作产品页面，我想做类似的事情：Link 到目前为止，我已经有了这个工作，我可以用onclick改变img：
$(document)
.ready(function() {
console.log("Yay, JQuery is loaded!");
$imgArray = $(".carousel-img").map(function() {
return $(this).attr("src");
});
console.log($imgArray);
$arrayLength = $imgArray.length;
$('#next').click(function() {
$productPicture = $(".product-image").attr("src");
});
$('.carousel-img').click(function() {
$img = this;
$src = $($img).attr('src');
console.log($src);
$(".product-image").attr("src", $src);
});
});<!doctype html>
<html lang="en">
<head>
<title>Product Screen </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<img src="https://www.adidas.dk/dis/dw/image/v2/aagl_prd/on/demandware.static/-/Sites-adidas-products/default/dw5304f4ae/zoom/AQ0197_01_standard.jpg?sh=840&strip=false&sw=840" class="product-image" alt="" width="450px" heigth="50px">
</div>
</div>
<div class="row">
<div class="col-2" id="prev" style="display:flex">
<i class="fas fa-chevron-circle-left"></i>
</div>
<div class="col-2">
<img src="https://www.adidas.dk/dis/dw/image/v2/aagl_prd/on/demandware.static/-/Sites-adidas-products/default/dw29adec95/zoom/CQ2040_01_standard.jpg?sh=840&strip=false&sw=840" class="carousel-img" alt="">
</div>
<div class="col-2">
<img src="https://www.adidas.dk/dis/dw/image/v2/aagl_prd/on/demandware.static/-/Sites-adidas-products/default/dwfccfe902/zoom/B79758_01_standard.jpg?sh=840&strip=false&sw=840" class="carousel-img" alt="">
</div>
<div class="col-2">
<img src="https://www.adidas.dk/dis/dw/image/v2/aagl_prd/on/demandware.static/-/Sites-adidas-products/default/dw5304f4ae/zoom/AQ0197_01_standard.jpg?sh=840&strip=false&sw=840" class="carousel-img" alt="">
</div>
<div class="col-2">
<img src="https://www.adidas.dk/dis/dw/image/v2/aagl_prd/on/demandware.static/-/Sites-adidas-products/default/dw5304f4ae/zoom/AQ0197_01_standard.jpg?sh=840&strip=false&sw=840" class="carousel-img" alt="">
</div>
<div class="col-2" id="next" style="display:flex">
<i class="fas fa-chevron-circle-right"></i>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="carousel.js"></script>
</body>
</html>
我的下一个问题是我想创建一个next和prev按钮，我将图像的srcs存储在一个数组中。怎么可以这样做？