Question

如何通过点击下面的缩略图来更改图像？因为缩略图显示为background-image。

如何通过点击缩略图来更改更大的图像来获取网址？

＆＃13;

.ci-top {
  clear: both;
  display: inline-block;
  width: 100%;
}

.top-left {
  float: left
}

.ci-bottom {
  text-align: right;
}

.ci-thumb {
  height: 150px;
  width: 150px;
  margin: 0;
  display: inline-block;
}

.ci-thumb-1 {
  background-image: url(http://placeholder.pics/svg/300/FF2209);
}

.ci-thumb-2 {
  background-image: url(http://placeholder.pics/svg/300/5BFF76);
}

.ci-thumb-3 {
  background-image: url(http://placeholder.pics/svg/300/325BFF);
}

＆＃13;

<div class="ci-main">

  <div class="ci-top">
    <div class="top-left"><img id="change-img" src="http://placeholder.pics/svg/300/FF2209"></div>
    <div class="top-right">
      <h1>test</h1>
      <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div>
  </div>


  <div class="ci-bottom">
    <div class="ci-thumb ci-thumb-1"></div>
    <div class="ci-thumb ci-thumb-2"></div>
    <div class="ci-thumb ci-thumb-3"></div>
  </div>
</div>

＆＃13;

我知道，如何通过点击某处来获取和更改网址，但我不知道如何获取背景图片的网址，然后在更大的图像处更改网址。

<img id="change-img" .. >

Answer 1

以下是您的回答，将background-image存储在变量中，删除url（）并将其替换为图像src

$(".ci-thumb").on("click",function(){
  var bg = $(this).css('background-image');
 bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
 $("#change-img").attr("src",bg);
 })

.ci-top {
    clear: both;
    display: inline-block;
    width: 100%;
}

.top-left{
float: left
}

.ci-bottom {
    text-align: right;
}

.ci-thumb {
    height: 150px;
    width: 150px;
    margin: 0;
    display: inline-block;
}

.ci-thumb-1 {
    background-image: url(http://placeholder.pics/svg/300/FF2209);
}

.ci-thumb-2 {
    background-image: url(http://placeholder.pics/svg/300/5BFF76);
}

.ci-thumb-3 {
    background-image: url(http://placeholder.pics/svg/300/325BFF);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ci-main">

<div class="ci-top">
    <div class="top-left"><img id="change-img"src="http://placeholder.pics/svg/300/FF2209"></div>
    <div class="top-right"><h1>test</h1>
        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></div>
</div>


  	<div class="ci-bottom">
  		<div class="ci-thumb ci-thumb-1"></div>
      <div class="ci-thumb ci-thumb-2"></div>
      <div class="ci-thumb ci-thumb-3"></div>
  	</div>
  </div>

单击缩略图更改图像

1 个答案: