时间戳

首页 > 解决方案 > JavaScript - 使用 data-pic 添加 img

javascript - JavaScript - 使用 data-pic 添加 img

问题描述

我正在尝试在spanwith data-pic中添加图像，但现在我想尝试图片轮播，如何使用 JavaScript 索引 data-pic 来实现效果？

我遵循以下说明：

W3C

$(".product-colors span").click(function () {
  $(".product-colors span").removeClass("active");
  $(this).addClass("active");
  $("body").css("background", $(this).attr("data-color"));
  $(".product-price").css("color", $(this).attr("data-color"));
  $(".product-button").css("color", $(this).attr("data-color"));
  $(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
  width: 14px;
  height: 14px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.blue {
  background: #7ed6df;
}

.green {
  background: #badc58;
}

.yellow {
  background: #f9ca24;
}

.rose {
  background: #ff7979;
}

.product-colors .active:after {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #8888;
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  left: -4px;
  top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
  <div class="product-card">
    <h1>A new model of free group travel</h1>
    <p>Travel destination</p>
    <div class="product-pic"></div>
    <div class="product-colors" id="Banner">
      <span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
      <span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
      <span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
      <span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
    </div>
    <div class="product-info">
      <div class="product-price">$90</div>
      <a href="Paying.html" class="product-button">Add to Cart</a>
    </div>
  </div>
</body>

我正在学习 JavaScript 的基础知识，我不知道如何实现此功能。

希望你能帮我

谢谢你的帮助 ：）

标签： javascriptjquerycss

解决方案

你不能同时使用背景和背景图像，一个会覆盖另一个，顺便问一下，你想创建什么？旋转木马还是什么？好吧，我想这就是你想要做的，为了实现这一点，你需要声明$('body')两次，将背景颜色添加到第一个，然后将背景图像添加到第二个或（反之亦然），如下是最终代码

var span = $('.product-colors span');
span.on('click', function() {
  span.removeClass('active');
  $(this).addClass('active');
  $('body').css("background-color", $(this).attr('data-color'));
  $('body').css('background-image', $(this).attr('data-pic'));
});

然后去css，我background-blend给它添加了属性，为了把background-colorand混合background-image在一起，我也设置span了display: inline-block

查看此 codepen 链接以查看此处所做的所有更改

推荐阅读