javascript实现页面上的ppt效果 (2008-09-28 16:27:30)
 转载▼
经常网站的主页上使用ppt方式播放图片，有的是使用flash做的，当然也有的使用javascript做的。现在就讲讲怎么用javascript做。
这里并不是单单的用javascript做的，是结合了css中的扩展效果做的。废话少说。
看看代码吧，并加以了说明。
1、网页相应位置放入img标签。
<a href='javascript:goPicUrl()'>
<img style="FILTER: revealTrans(duration=2,Transition=5)" src="javascript:NextPic()" width="300" height="200" border="1" id=imgInit name=imgInit />
</a>
这里是将图片放在了链接标签的里面，是为了实现，播放中的图片鼠标可以点击。a里面放入了一个方法goPicUrl()这个方法下面介绍。这里先知道，他是控制点击该链接以后，图片链接的地址。img中使用了css内嵌样式，并使用了滤镜（filter）效果中的过渡（revealTrans），其中duration指定每张图片的过渡时间，以秒计算，transition指定过渡方式，其取值是0-23之间。src则指定img图片，这里使用NextPic方法，来指定图片源。width，height为宽高，border指定边框，id，name为标识。
2、javascript方法
<script type = "text/javascript" >
//因为图片有多个，所以图片地址，点击图片对应链接地址，图片名称我都是用“#”连在一起的字符串
//使用时再用“#”劈开，就可以获得所有图片信息的数组，从而获得所有的图片。
var imgUrlStr= "${imgUrl}";//图片地址
var imgLinkStr= "${imgLink}";//点击图片对应链接
var imgTextStr= "${imgText}";//图片名称，即鼠标放上面显示的名称
var imgUrl= imgUrlStr.split("#");
var imgLink= imgLinkStr.split("#");
var imgText= imgTextStr.split("#");
var picNum=0;//控制图片信息数组的游标
function NextPic(){
//将游标逐个下移，看是否超出了数组，超出了，则退为0.这里可以控制显示的个数，即取一个固定值，
//与imgUrl.length比较较小的那个。则可以控制总共显示多少个。
if(picNum< imgUrl.length -1)
picNum++ ;//显示个图片
else
picNum=0;
if (document.all){
//下面注意，如果存在于FORM表单中，需要使用下面的方法，否则可直接使用name。
//随机取出控制切换效果的值0-23之间 document.imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23); document.imgInit.filters.revealTrans.apply(); //应用效果
document.imgInit.filters.revealTrans.play(); //播放效果
}
document.images.imgInit.src=imgUrl[picNum]; //获得当前图片地址
document.images.imgInit.alt=imgText[picNum]; //设置鼠标放在图片上显示的名称
//如果不是图片，而是SWF等，可做判断，内容可在程序中做好，再放于下面。
// focustext.innerHTML='<a href='+imgLink[picNum]+' target=_blank>'+imgText[picNum]+'</a>';
theTimer=setTimeout('NextPic()', 3000); //设置翻页时间 没3秒中执行一次NextPic方法
}
function goPicUrl(){
//如果鼠标点击了当前picNum的图片则将该控制打开该链接地址，
window.open(imgLink[picNum],'_blank');
}
</script>
下载地址:
jquery hove事件制作鼠标悬停图片上滑动显示文字内容
调用JS的函数NextPic（） |
