在过去的几天里,我一直在修改一个视差滚动网站。我有一个很好的原型工作,滚动不同的背景图像。看起来很酷。
我想更进一步。我基本上有一个分配了背景图像的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将是我将链接添加到下一个图像的位置。
关于如何做到这一点的任何想法?
答案 0 :(得分: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>
这应该将de background-image改为4张图片中随机的一张......