Jquery 使用div背景url的图像库

当“#gallery加载后，将背景图像设置为列表中的第一个链接。”当单击“#trigger”时，我希望将“#gallery”的背景图像更改为下一个同级链接。（如果它们不应按实际情况列出，请告知我）

触发

我尝试为链接的位置创建一个变量，并将其用于 背景为“#gallery”，然后为“#trigger”创建一个单击函数事件，在该事件中将变量的值更改为下一个链接

这是我的第一篇帖子，所以我非常感谢您的反馈。

这里有一把小提琴：

有点草率，但它应该能帮助你理解。就我个人而言，我不会把我的图片作为链接HREF。只需将它们放在javascript数组中并保存隐藏的HTML即可，而且它们作为数组更容易使用

Html

CSS

---

这里是一个数组：简单得多。

您可以创建一个图像数组，只需更改应用于div的背景图像的url即可

<div id="gallery">
</div>
<input type="button" id="trigger" value="Trigger">
<style>
#gallery
{
  background-image: url('/images/Image1.jpg');
  background-repeat: no-repeat;
}
</style>
<script>
var imageArr = ["/images/Image1.jpg"
                ,"/images/Image2.jpg"];
var slideIndex = 0; // sets the initial index
$('input:button').on("click",function()
{
  slideIndex++; // increment the index by 1 to get the next image
  if(imageArr.length <= slideIndex) // safe check - avoid index overflow and reset the index once reached the last image 
    slideIndex = 0;
  $("#gallery").css("background-image","url(" + imageArr[slideIndex] + ")");
});
</script>

#画廊
{
背景图像：url（'/images/Image1.jpg'）；
背景重复：无重复；
}
var imageArr=[“/images/Image1.jpg”
，“/images/Image2.jpg”]；
var slideIndex=0；//设置初始索引
$（'input:button'）。在（“单击”，函数（）上）
{
slideIndex++；//将索引增加1以获得下一个图像
如果（imageArr.length）到目前为止您尝试了什么？图像应该同时显示为
#gallery
的
css
背景和
img
元素？或者，在
#gallery
元素中只显示单个
img
元素？我不再有代码了（希望我有）但在页面加载时，它设置了一个变量作为第一个链接。然后，它将div背景设置为该变量。然后，当单击触发器时，它将该变量设置为下一个链接。（这就是它应该做的）我认为我没有正确地更改变量或将其设置为背景。@Bradcooniere应该显示两个图像，还是一个？是“背景”
css
background
property？，或者实际的
img
元素，应该覆盖整个
#gallery
div
？ul设置为显示：无；图像将显示为div的背景。感谢将它们用作数组的想法。起初我不确定它是否理想。这就是exac这正是我想要的，谢谢。很抱歉我的帖子中没有详细的内容，以及问题的基本性质。我是jQuery的新手。你帮了我很多忙！：）不用担心。很高兴帮助：）
<div id="gallery">
    <ul>
        <li><a data-image-id="1" href="http://lorempixel.com/300/300/sports/"></a></li>
        <li><a data-image-id="2" href="http://lorempixel.com/300/300/city/"></a></li>
        <li><a data-image-id="3" href="http://lorempixel.com/300/300/abstract/"></a></li>
    </ul>
</div>
<div id="trigger">Trigger</div>

$(document).ready(function() {

  var currentImageId = 1;
  var totalImages = 3;

  rotateImage();

  $('#trigger').click(function() {
    rotateImage();
  });

  function rotateImage() {
    var url = $('#gallery').find('ul li a[data-image-id="'+currentImageId+'"]').attr('href');
    $('#gallery').css('background-image', 'url(' + url + ')');
    currentImageId++;
    if (currentImageId > totalImages) {
      currentImageId = 1;
    }
  }

});

#gallery {
  width: 300px;
  height: 300px;
}

#gallery ul {
  display: none;
}

<div id="gallery">
</div>
<input type="button" id="trigger" value="Trigger">
<style>
#gallery
{
  background-image: url('/images/Image1.jpg');
  background-repeat: no-repeat;
}
</style>
<script>
var imageArr = ["/images/Image1.jpg"
                ,"/images/Image2.jpg"];
var slideIndex = 0; // sets the initial index
$('input:button').on("click",function()
{
  slideIndex++; // increment the index by 1 to get the next image
  if(imageArr.length <= slideIndex) // safe check - avoid index overflow and reset the index once reached the last image 
    slideIndex = 0;
  $("#gallery").css("background-image","url(" + imageArr[slideIndex] + ")");
});
</script>