用jquery循環瀏覽背景

我使用漸進CSS來設計我的網站背景圖片。我發現了幾個關於使用jQuery來瀏覽圖片的教程，但是我還沒有看到任何可以通過CSS實現的教程。他們都是用HTML。我該如何做到這一點，以便JQuery或JavaScript循環訪問圖像，而無需創建一個div來執行此操作。用jquery循環瀏覽背景

我的CSS：

html { 
background: url('../assets/homepage.jpg') no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2013-02-06 user2048211

您發佈不顯示任何*先進性*代碼。請添加您迄今爲止完成所需的操作。並描述你的意思*騎自行車*，導致100人，100週期的方法.. –

CSS是漸進的，並與瀏覽器調整大小。 – user2048211

那麼你到目前爲止嘗試過什麼？ –

你肯定可以做到這一點，但不會有任何過渡時，圖像的變化：

html, html.slide1 { 
    background: url('../assets/homepage1.jpg') no-repeat center center fixed; 
    /* add vendor prefixes */ 
    background-size: cover; 
} 
html.slide2 { 
    background-image: url('../assets/homepage2.jpg'); 
} 
html.slide3 { 
    background-image: url('../assets/homepage3.jpg'); 
}

$(function() { 
    var classList = ['slide1', 'slide2', 'slide3'], 
     $html = $('html'), 
     last = classList.length - 1, 
     current = 0; 

    setInterval(function() { 
     current = current == last ? 0 : current + 1; 
     $html.prop('class', classList[current]); 
    }, 1000); 
});

這裏的小提琴：http://jsfiddle.net/rmR7V/

來源

2013-02-06 19:21:53

嘗試將背景圖像關閉屏幕上，改變它並將其滑回。

<style> 
html { 
background: url('Image1.jpg') no-repeat center center fixed; 
background-size: cover; 
} 
</style>

<script type="text/javascript"> 
$(document).ready(function() { 
    $('html').animate({ 
     "background-position": -2048 
    },2000, function() { 
     $('html').css('background-image',"url('Image2.jpg')"); 
     $('html').animate({ 
     "background-position": 0 
     },2000); 
    }); 
}); 
</script>

來源

2013-02-06 19:36:28 Quotidian

用jquery循環瀏覽背景

回答

相關問題