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

如何切换按钮上的图像并将其用作背景。现在，我的jQuery代码允许我在div中隐藏和显示图像，但我希望将所有图像作为背景并切换它们。有没有办法修改我的jQuery代码

$（'.carouselanimal'）。单击（函数（a）{
$.each（$（'.carouselanimal'），函数（i，v）{
$（$（v.attr（“target”））.hide（）；
});
$（$（this.attr（“target”）.show（）；
});
.carouselanimal{
显示：内联块；
宽度：50px；
高度：50px；
背景色：黑色；
颜色：白色；
}
#图像保持器{
宽度：200px；
高度：200px；
边框：实心2px红色；
溢出：隐藏；
}

动物1
动物2
动物3
动物4
试试我的shoter代码


$（'.carouselanimal'）。单击（函数（e）{
var image=$（this.data（'bg'）；
$（'#图像支架bg'）.css({
“背景图像”：“url（“+image+”）”
});
});
.carouselanimal{
显示：内联块；
宽度：50px；
高度：50px；
背景色：黑色；
颜色：白色；
}
#图像保持器{
宽度：200px；
高度：200px；
边框：实心2px红色；
溢出：隐藏；
}

动物1
动物2
动物3
animal4
您可以隐藏所有图像，在每次单击时获取
src
，并使用
background image
将css方法应用于具有该
src
的div


$（“img”）.hide（）
$（'.carouselanimal'）。单击（函数（a）{
var val=$（$（this.attr（“target”））.attr（“src”）
$（“#图像持有者bg”）.css（{'background-Image'：'url（'+val+'））}）；
$（“#图像支架bg”）.css（{'background-size'：'cover'）；
});
.carouselanimal{
显示：内联块；
宽度：50px；
高度：50px；
背景色：黑色；
颜色：白色；
}
#图像保持器{
宽度：200px；
高度：200px；
边框：实心2px红色；
溢出：隐藏；
}

动物1
动物2
动物3
animal4
您的意思是将每个图像作为div的背景图像？是，然后打开按钮切换它们