图片库使用 div 背景 url

Question

加载“#gallery”时，将背景图像设置为列表中的第一个 link。单击 "When "#trigger”，我想要“#gallery”的背景图像将更改为下一个兄弟 link。（让我知道它们是否不应按原样列出）

<div id="gallery">
    <ul>
        <li><a href="images/1.jpg"></a></li>
        <li><a href="images/2.jpg"></a></li>
        <li><a href="images/3.jpg"></a></li>
    </ul>
</div>
<div id="trigger">Trigger</div>

我尝试为 link 的位置创建一个变量，并将其用于 “#gallery”的背景，然后为“#trigger”创建点击功能事件，它将变量的值更改为下一个 link.

这是我的第一个 post，非常感谢任何反馈。

Answer 1

这是一个fiddle：https://jsfiddle.net/7yqu78eL/

有点草率，但应该可以帮助您理解。就我个人而言，我不会将我的图像作为 link hrefs。只需将它们放在 javascript 数组中并保存隐藏的 HTML - 而且它们将更容易作为数组使用。

Html

<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>

jQuery

$(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;
    }
  }

});

CSS

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

#gallery ul {
  display: none;
}

这里有一个 fiddle，它是一个数组：https://jsfiddle.net/2c7z2qxq/ – 更简单。

Answer 2

您可以创建一组图像，只需更改应用于 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>

图片库使用 div 背景 url

Image gallery using div background url

css

jquery

image-gallery