首页 > 代码库 > js图片轮换显示实例
js图片轮换显示实例
用js脚本实现图片轮换显示,很简单的小例子,特此分享。
1,js代码部分,图片轮换代码。
<script language="JavaScript"> var imgUrl=new Array(); var imgLink=new Array(); var imgText=new Array(); var picNum=0; imgUrl[1]="图片地址一"; imgLink[1]="链接1"; imgText[1]="标题或简介或其它HTML内容1"; imgUrl[2]="图片地址二"; imgLink[2]="链接2"; imgText[2]="标题或简介或其它HTML内容2"; imgUrl[3]="图片地址三"; imgLink[3]="链接3"; imgText[3]="标题或简介或其它HTML内容3"; imgUrl[4]="图片地址四"; imgLink[4]="链接4"; imgText[4]="标题或简介或其它HTML内容4"; imgUrl[5]="图片地址五"; imgLink[5]="链接5"; imgText[5]="标题或简介或其它HTML内容5"; function NextPic(){ if(picNum<4) picNum++ ;//显示4个图片 else picNum=1; if (document.all){ www.jbxue.com //注意,如果存在于FORM表单中,需要使用下面的方法,否则可直接使用name。 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]; //如果不是图片,而是SWF等,可做判断,内容可在程序中做好,再放于下面。 focustext.innerHTML=‘<a href=http://www.mamicode.com/‘+imgLink[picNum]+‘ target=_blank>‘+imgText[picNum]+‘‘; //设置翻页时间 theTimer=setTimeout(‘NextPic()‘, 3000); } function goUrl(){ window.open(imgLink[picNum],‘_blank‘); } </script>
2,html代码部分
<TABLE cellPadding=0 width=100% border=0> <TR> <TD align=middle height="140" > <div align=‘center‘> <a href=‘javascript:goUrl()‘><img style="FILTER: revealTrans(duration=2,Transition=5)" src="javascript:NextPic()" width="170" height="120" border="1" id=imgInit name=imgInit></a></TD></TR> <TR><TD align=middle height="38" ><div name=focustext id=focustext align=‘center‘></div> </div> </TD></TR></TABLE>
您可能感兴趣的文章:
- js图片轮换效果的例子
- JS图片自动轮换效果实例代码
- jquery animate实现图片轮换
- javascript+xml简单图片轮换(只支持IE)的实现代码
- 图片轮换效果(点击按钮停止执行)的js代码
- jquery 图片幻灯轮换效果的代码一例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。