作为滑动轮播的视差背景图像

Question

过去几天我一直在创建一个视差滚动网站。我有一个很好的原型工作，滚动不同的背景图像。看起来很酷。

我想更进一步。我基本上有一个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将添加我的链接到下一个图像。

有关如何做到这一点的任何想法？

Answer 1

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张图片中的任意一张...