随机幻灯片显示淡入淡出

时间:2012-12-15 15:59:02

标签: javascript jquery slideshow fade

我正在做一个网站,在该网站的标题中,我想要一个显示RANDOM图像的“幻灯片” - 我已经使用了javascript。

我希望将图像输入/输出,而不是仅仅更改它们。

除此之外,我真的想知道是否有任何方法可以让脚本从目录本身加载图片,而不是每次上传图片时都必须手动更新脚本。

这甚至可以用javascript,php,css或jquery完成吗? 任何替代品? div随着淡入淡出改变背景随机?什么?

以下是我现在使用的代码..它没有任何问题地改变图片。

<script language="javascript">

var delay=1000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

1 个答案:

答案 0 :(得分:1)

是的所有这一切都可以用javascript(差不多)完成,javascript本身无法扫描文件夹内容,因为你需要某种服务器语言,很可能你会用PHP来扫描文件夹内容并将它们返回给客户端

所以基本上你需要一个jquery ajax函数,我强烈推荐post

现在使用ajax,您可以获得有关该文件夹的所有必需数据。

现在关于淡入淡出效果,您需要使用类似thisthis

的内容

至于随机性,我很确定你可以解决这个问题,只需将完整的图像列表放入数组中,然后使用javascript random函数从该数组中获取随机图像。