Question

我目前正在制作产品页面，我想做类似的事情：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存储在一个数组中。怎么可以这样做？

产品页面的简单轮播

0 个答案: