[英]Parallax background image as a sliding carousel
在過去的幾天里,我一直在努力創建一個視差滾動站點。 我有一個不錯的原型,可以滾動不同的背景圖像。 看起來很酷。
我想更進一步。 我基本上有一個div,並為其分配了背景圖片。 背景圖像以不同的速度滾動。 我現在想添加單擊左箭頭或右箭頭並更改背景的功能。 基本上是輪播。 但是,如果用戶向下滾動,我仍然希望保持視差效果。
HTML的結構為:
<section id="one">
<div id="mainimagewrapper">
<div class="image1">
<div class="image2">
<div id="textdiv">this is some text</div>
</div>
</div>
</div>
</section>
mainimagewrapper包含我要更改的大圖像。 textdiv將是我將鏈接添加到下一張圖像的位置。
有關如何執行此操作的任何想法?
js將背景從數組更改為隨機背景:
function changeBG()
{
var images = new Array('http://www.windows-7-wallpapers.com/wallpapers/img24-1920x1200.jpg',
'http://www.pptbackgroundstemplates.com/backgrounds/seamless-white-texture-ppt-backgrounds-powerpoint.jpg',
'http://awesomewallpapers.files.wordpress.com/2009/08/white2.png',
'http://www.wallpaperpimper.com/wallpaper/Flower/Flower_Art/Flower-Art-Winter-White-1-1920x1200.jpg');
$('#mainimagewrapper').css("background-image", "url("+ images[getRandom(0, images.length - 1)] +")");
}
function getRandom(min, max) {
if (min > max) {
return -1;
}
if (min == max) {
return min;
}
var r;
//do {
r = Math.random();
//}
//while (r == 1.0);
return min + parseInt(r * (max - min + 1));
}
您可以這樣創建按鈕:
<input type="button" onclick="changeBG();" >
或像這樣:
<a href="javascript:changeBG();">ButtonText</a>
這應該將背景圖像更改為這4張圖片中的任意一張...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.