切换多个图像并将其设置为背景

Question

如何在按钮单击时切换图像并将其用作背景。现在我的jQuery代码允许我隐藏和显示div中的图像，但我想将所有图像作为背景并切换它们。有没有办法调整我的jQuery代码？

$('.carouselanimal').click(function(a) {
    $.each($('.carouselanimal'), function(i, v) {
        $($(v).attr("target")).hide();
    });
    $($(this).attr("target")).show();
});

.carouselanimal {
    display: inline-block;
    width: 50px;
    Height: 50px;
    background-color: black;
    color: white;
}
#Image-Holder-bg {
    width: 200px;
    height: 200px;
    border: solid 2px red;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Image-Holder-bg" class="inner ">
    <img class="animal1" 
src="https://vignette.wikia.nocookie.net/totalna-
porazka/images/3/3a/100px-DJ.png/revision/latest?cb=20140813091425&path-
prefix=pl" style="width:200px; height:200px;" />
    <img class="animal2" 
src="https://vignette.wikia.nocookie.net/totalna-
porazka/images/7/7e/100px-Owen.png/revision/latest?
cb=20140813152315&path-prefix=pl" style="width:200px; height:200px;" />
    <img class="animal3" 
src="https://vignette.wikia.nocookie.net/totalna-
porazka/images/4/48/100px-Bridgette.png/revision/latest?
cb=20140813090348&path-prefix=pl" style="width:200px; height:200px;" />
    <img class="animal4" 
src="https://vignette.wikia.nocookie.net/totalna-
porazka/images/d/df/100px-Staci.png/revision/latest?
cb=20140813153602&path-prefix=pl" style="width:200px; height:200px;" />
</div>

<div id="Cat" target=".animal1" class="carouselanimal">animal1</div>
<div id="Dog" target=".animal2" class="carouselanimal">animal2</div>
<div id="Zebra" target=".animal3" class="carouselanimal">animal3</div>
<div id="Peacock" target=".animal4" class="carouselanimal">animal4</div>

Answer 1

您可以隐藏所有图片，每次点击都会获得src，然后将background-image的css方法应用于src的div。

＆＃13;

＆＃13;

$("img").hide()
$('.carouselanimal').click(function(a) {
    var val = $($(this).attr("target")).attr("src")
    $("#Image-Holder-bg").css({'background-image': 'url('+val+ ')'});
    $("#Image-Holder-bg").css({'background-size': 'cover'});
});

＆＃13;

.carouselanimal {
    display: inline-block;
    width: 50px;
    Height: 50px;
    background-color: black;
    color: white;
}
#Image-Holder-bg {
    width: 200px;
    height: 200px;
    border: solid 2px red;
    overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Image-Holder-bg" class="inner">
    <img class="animal1" 
src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3a/100px-DJ.png/revision/latest?cb=20140813091425&path-prefix=pl" style="width:200px; height:200px;" />
    <img class="animal2" 
src="https://vignette.wikia.nocookie.net/totalna-porazka/images/7/7e/100px-Owen.png/revision/latest?cb=20140813152315&path-prefix=pl" style="width:200px; height:200px;" />
    <img class="animal3" 
src="https://vignette.wikia.nocookie.net/totalna-porazka/images/4/48/100px-Bridgette.png/revision/latest?cb=20140813090348&path-prefix=pl" style="width:200px; height:200px;" />
    <img class="animal4" 
src="https://vignette.wikia.nocookie.net/totalna-porazka/images/d/df/100px-Staci.png/revision/latest?cb=20140813153602&path-prefix=pl" style="width:200px; height:200px;" />
</div>

<div id="Cat" target=".animal1" class="carouselanimal">animal1</div>
<div id="Dog" target=".animal2" class="carouselanimal">animal2</div>
<div id="Zebra" target=".animal3" class="carouselanimal">animal3</div>
<div id="Peacock" target=".animal4" class="carouselanimal">animal4</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试我的镜头代码

＆＃13;

＆＃13;

$('.carouselanimal').click(function(e) {
  var image = $(this).data('bg');
  $('#Image-Holder-bg').css({
    'background-image': 'url("' + image + '")'
  });
});

＆＃13;

.carouselanimal {
  display: inline-block;
  width: 50px;
  Height: 50px;
  background-color: black;
  color: white;
}

#Image-Holder-bg {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Image-Holder-bg" class="inner" style="background-image: url('https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3a/100px-DJ.png/revision/latest?cb=20140813091425&path-prefix=pl');"></div>

<div id="Cat" data-bg="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3a/100px-DJ.png/revision/latest?cb=20140813091425&path-prefix=pl" class="carouselanimal">animal1</div>
<div id="Dog" data-bg="https://vignette.wikia.nocookie.net/totalna-porazka/images/7/7e/100px-Owen.png/revision/latest?cb=20140813152315&path-prefix=pl" class="carouselanimal">animal2</div>
<div id="Zebra" data-bg="https://vignette.wikia.nocookie.net/totalna-porazka/images/4/48/100px-Bridgette.png/revision/latest?cb=20140813090348&path-prefix=pl" class="carouselanimal">animal3</div>
<div id="Peacock" data-bg="https://vignette.wikia.nocookie.net/totalna-porazka/images/d/df/100px-Staci.png/revision/latest?cb=20140813153602&path-prefix=pl" class="carouselanimal">animal4</div>

＆＃13;

＆＃13;

＆＃13;