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

回答

相關問題