Question

加载＆＃34; #gallery时，将背景图像设置为列表中的第一个链接。＆＃34;当＆＃34;＃trigger＆＃34;点击，我想要＆＃34;＃gallery＆＃34;的背景图片要改为下一个兄弟链接。（如果他们不应该以他们的方式列出，请告诉我）

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

我尝试为链接的位置创建一个变量，并将其用于＆＃34;＃gallery＆＃34;的背景然后为＆＃34;＃trigger＆＃34;创建一个click功能事件。它将变量的值更改为下一个链接。

这是我的第一篇文章，所以我很感激任何反馈。

Answer 1

这是一个小提琴：https://jsfiddle.net/7yqu78eL/

有点草率但它应该有助于你理解。我个人不会把我的图像作为链接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;
}

这是一个小提琴作为一个数组：https://jsfiddle.net/2c7z2qxq/ - 更简单。

Answer 2

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

<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背景网址的图片库

2 个答案: