【任务7-4】在网页中自动切换焦点图片
【任务描述】
在网页文档0704.html中编写javascript代码实现自动切换焦点图片的功能。
网页中自动切换图片的浏览效果如图7-7所示,每一段时间切换一张图片,类似于幻灯片的功能。
【任务实施】
1.编写javascript代码
打开网页文档0704.html,切换到【代码】视图,将光标置于“<div class="img_reg">”与“</div>”之间,然后输入下面所示的javascript代码。
<div class="img_reg"> <script language="javaScript" type="text/javascript"> <!-- function objSP_Article() { this.imgUrl=""; this.linkUrl=""; this.title=""; }
function slidePic_Article(_id) { this.ID=_id; this.width=0;this.height=0; this.timeOut=5000; this.effect=23; this.titleLen=0; this.picNum=-1; this.img=null; this.url=null;this.title=null; this.allPic=new Array(); this.add=slidePic_Article_Add; this.show=slidePic_Article_Show; this.loopShow=slidePic_Article_LoopShow; }
function slidePic_Article_Add(_sp) { this.allPic[this.allPic.length] = _sp; }
function slidePic_Article_Show() { if(this.allPic[0] == null) return false; document.write("<div align='center'><a id='url_" this.ID "' href='' target='_blank'><img id='img_" this.ID "' style='width:" this.width "px; height:" this.height "px; filter:revealTrans(duration=2,transition=23);' src='javascript:null' border='0'></a>"); if(this.titleLen != 0) { document.write("<br/><span id='title_" this.ID "'></span></div>"); } else{ document.write("</div>");} this.img = document.getElementById("img_" this.ID); this.url = document.getElementById("url_" this.ID); this.title = document.getElementById("title_" this.ID); this.loopShow(); }
function slidePic_Article_LoopShow() { if(this.picNum<this.allPic.length-1) this.picNum ; else this.picNum=0; this.img.filters.revealTrans.Transition=this.effect; this.img.filters.revealTrans.apply(); this.img.src=this.allPic[this.picNum].imgUrl; this.img.filters.revealTrans.play(); this.url.href=this.allPic[this.picNum].linkUrl; if(this.title) this.title.innerHTML= "<a href=" this.allPic[this.picNum].linkUrl " target='_blank'>" this.allPic[this.picNum].title "</a>"; this.img.timer=setTimeout(this.ID ".loopShow()",this.timeOut); }
var slidePic1= new slidePic_Article("slidePic1"); slidePic1.width = 142; slidePic1.height = 64; slidePic1.timeOut = 3000; slidePic1.effect = 23; slidePic1.titleLen = 40; var osp = new objSP_Article(); osp.imgUrl = "images/0704angda.jpg"; osp.linkUrl = "#"; osp.title = "昂达商标"; slidePic1.add(osp); var osp = new objSP_Article(); osp.imgUrl = "images/0704apple.jpg"; osp.linkUrl = "#"; osp.title = "苹果商标"; slidePic1.add(osp); var osp = new objSP_Article(); osp.imgUrl = "images/0704nokia.jpg"; osp.linkUrl = "#"; osp.title = "诺基亚商标"; slidePic1.add(osp); var osp = new objSP_Article(); osp.imgUrl = "images/0704oppo.jpg"; osp.linkUrl = "#"; osp.title = "OPPO商标"; slidePic1.add(osp); slidePic1.show(); //--> </script> </div> |
2.分析自动切换图片的javascript代码
3.自动切换图片代码的应用
(1)自行设置图片地址、图片链接地址和图片标题
(2)自行增加图片的数量
4.效果图如下所示:
每一次的课都能学会很多东西,谢谢老师
谢谢老师的精彩讲课,每次都能学到很多东西
老师讲课很细致
老师讲的比较清晰明白,我学会了,谢谢老师!
讲的很好、细致
老师讲的很好,辛苦辛苦了
讲课生动形象,容易理解,棒棒哒