jquery幻燈片使用背景圖像

我有一個div，目前有一個靜態背景圖像。jquery幻燈片使用背景圖像

我需要爲此div創建背景圖像的幻燈片。

我可以通過設置超時然後更改CSS中的背景圖像來達到此目的，但這不是很優雅。

我想理想地將背景圖像淡入和淡入，但div包含其他頁面元素，所以我不能以任何方式改變不透明度。

有誰知道一個很好的方法來做到這一點使用jQuery？

下面是一些淡出/淡入的代碼，但淡出div的內容。

$("#slideshow").fadeOut(5000, function(){ 
    $("#slideshow").css('background-image','url(myImage.jpg)'); 
    $("#slideshow").fadeIn(5000); 
});

來源

2011-03-04 Tom

HTML：

<div class="slideshow"></div>

CSS：

.slideshow 
{ 
    position: relative; 
    width: 350px; 
    height: 150px; 
} 
.slideshow img 
{ 
    position: absolute; 
    width: 350px; 
    height: 150px; 
    z-index:-1; 
}

jQuery的

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98'); 
var nextimage=0; 

doSlideshow(); 

function doSlideshow() 
{ 
    if($('.slideshowimage').length!=0) 
    { 
     $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()}); 
    } 
    else 
    { 
     slideshowFadeIn(); 
    } 
} 
function slideshowFadeIn() 
{ 
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);})); 
    if(nextimage>=images.length) 
     nextimage=0; 
}

jsfiddle Demo

來源

2011-03-04 20:07:27 Gareth

而不只是更改背景圖片的，你可以先打電話

fadeOut()

然後更改源，然後調用

fadeIn()

像...

$('#image').fadeOut(500, function() { 
     $(this).attr('src', 'new-image.png') 
      .load(function() { 
       $(this).fadeIn(); 
      }); 
    });

要使用各種圖像，有很多解決方案，但是你可以簡單地遍歷它們的列表。

來源

2011-03-04 17:23:17 Orbit

這並不改變div的背景圖像。 – Tom 2011-03-04 17:27:58

謝謝，誤解了這個問題。你可以創建另一個絕對定位下面的div嗎？ – Orbit 2011-03-04 17:30:30

@Tom - 您接受的答案也不是。 – Jeemusu 2012-10-12 04:24:23

您可以絕對創建一個定位並使用滑塊插件更改div中包含的圖像。 Otherwize你必須精靈的背景。我用Jquery Tools tabs plugin實現了這一點。

$(".slidetabs").tabs(".images > div", { 

    // enable "cross-fading" effect 
    effect: 'fade', 
    fadeOutSpeed: "slow", 

    // start from the beginning after the last tab 
    rotate: true 

// use the slideshow plugin. It accepts its own configuration 
}).slideshow();

來源

2011-03-04 18:41:10

這是一個解決方案，不僅解決您的問題，但也將解決一些其他問題。在您的DOM上創建另一個DIV作爲疊加層，並僅在此DIV上執行淡入淡出功能。它會顯示好像內容正在淡入/淡出。這種方法也更具性能，因爲您只是淡化單個DIV而不是多個元素。這裏有一個例子：

 

$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() { 
    // Step 1: change your content underneath the hidden div 
    // Step 2: hide the overlay 
    $('#containeroverlay').fadeOut('normal'); 
})

更重要的是，這種方法將在IE6-8工作，沒有搞砸了元素的字體走樣，你可能對股利。

來源

2011-03-04 18:44:03 Joshua

如何添加分頁大拇指列表，更新backgr點擊圖像，然後，一秒鐘或兩秒鐘，它就會自動開始淡入和下一個bg img？

HTML：

<div class="slideshow"> 
    <h1>Text</h1> 
    <input type="button" value="Hello" /> 
</div> 

<ul> 
    <li><a href="#"><img src="http://placehold.it/50x50"></a></li> 
    <li><a href="#"><img src="http://placehold.it/50x50/123456"></a></li> 
    <li><a href="#"><img src="http://placehold.it/50x50/dbca98"></a></li> 
</ul>

CSS：

.slideshow 
{ 
    position: relative; 
    width: 350px; 
    height: 150px; 
} 
.slideshow img 
{ 
    position: absolute; 
    width: 350px; 
    height: 150px; 
    z-index:-1; 
} 

ul {position: absolute; top: 125px; left: 75px;} 

li { 
    float: left; 
    border: 1px solid #000; 
    margin: 15px; 

}

的Javascript：

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98'); 
var nextimage=0; 

doSlideshow(); 

function doSlideshow() 
{ 
    if($('.slideshowimage').length!=0) 
    { 
     $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()}); 
    } 
    else 
    { 
     slideshowFadeIn(); 
    } 
} 
function slideshowFadeIn() 
{ 
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);})); 
    if(nextimage>=images.length) 
     nextimage=0; 
}

看到這一切在一起http://jsfiddle.net/tatygrassini/R4ZHX/75/。

來源

2011-12-02 03:02:58 Taty

jquery幻燈片使用背景圖像

回答

相關問題