使用div背景的图片库url

-2

当“#gallery加载后，将背景图片设置为列表中的第一个链接”。点击“#trigger”后，我想让“#gallery”的背景图片为更改为下一个兄弟链接。（让我知道，如果他们不应该在他们的方式上市）使用div背景的图片库url

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

我试图使一个变量链接的位置，并使用它的背景的“#gallery”，然后为“#trigger”创建一个点击函数事件，它将变量的值更改为下一个链接。

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

来源

2015-12-08 Brad

到目前为止您尝试了什么？ –

图像应该显示为''gallery'的'css''背景'和'img'元素？或者，只能在'＃gallery'元素中显示单个'img'元素？ – guest271314

我没有代码了（希望我做了）但在页面加载时，它设置了一个变量，这是第一个链接。然后它将div背景设置为该变量。然后当点击触发器时，将变量设置为下一个链接。（这就是它应该做的）我不认为我完成了正确地改变变量或将其设置为背景。 – Brad

您可以创建一个图像数组，然后更改应用于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>

来源

2015-12-08 20:06:26 DinoMyte

这看起来不错。我现在在我的项目中试用它。 – Brad

这正是我一直在寻找的，谢谢。对于我的帖子缺乏细节以及问题的基本性质，感到抱歉。我是jQuery的新手。你帮了很多！ :) – Brad

不用担心。乐意效劳：） – DinoMyte

这里是一个小提琴：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/ - 简单得多。

来源

2015-12-08 20:02:44

感谢将它们用作数组的想法。起初我不确定它是否理想。 – Brad

使用div背景的图片库url

回答

相关问题