教学课件 电子商务网页设计与制作.ppt

二、添加图片轮换功能 如图9-3所示,4张图片都已全部显示在了页面上,但还没有实现动态自动轮换的功能。为了实现自动轮换,我们需要为它们添加脚本语言,即经常用到的JavaScript语言。在前面添加的图片代码下面加入以下代码: script language=″javascript″ Function$(_sld)(//根据对象id获取对象的函数实现 return document.getElementByld(_sld); ) var speed=6000;//播放的速度,单位毫秒 var setid=null; var auto=″true″;//自动播放标志 function galleryplay( divs,a,mtime){//自动播放函数实现,divs表示播放的图片列表,//a表示自动播放默认开始图片,mtime表示播放的速度 if(divs=″0″)return false; var start=3; if(auto=″true″){ start=a-1;//图片播放开始标记 speed=mtime; setid= null; var loop=function( ){ ids= divs.split(″,″); //所有图片都不显示 for(var i=0; iids.length;i++){ $ (ids[i]).style.display=none; //让图片标记为start的图片显示 $ (ids[start]).filters.revealTrans.Transition= Math.floor(Math.random( )*23); $ (ids[start]).filters.reveaITrans.apply( ); $ (ids[start]).filters.reveaITrans.play( ); $ (ids[start]).style.display= none; setid=setTimeout(loop,speed); start++; if(start= =ids.length){ start=0; } 　　　}; loop( ); } } galleryplay(1,2,3,4,1,6000);//调用自动播放函数 /script 第二节　浮动广告的制作 浮动广告是当前网上最热门的广告特效之一,给人耳目一新的感觉,其主要用于一些最新广告的宣传,可使网页时尚漂亮,并可以体现及时性。本节的目标是利用CSS实现个人网站联系客服的浮动广告特效功能。具体要求:广告在页面上按照一定的轨迹浮动,当鼠标移动到浮动广告上时,浮动广告停止运行,便于用户详细点击查看,制作效果如图9-4所示。 一、添加浮动广告图片 二、实现广告的浮动 在 index.html的head标签中加入以下 JavaScript代码: script type= ″ text/javascript″ var Rimifon= { ″Ads″:new Object, ″ NewFloatAd″:function(imgUrl,strLink) { var ad= document.createElement( ″ a″ ); ad. DirV=true; ad. DirH=true; ad. AutoMove=true; ad. Image=new Image( ); ad. Seed=Math.random( ); ad. Timer= setlnterval( ″Rimifon.Float( ″+ad.Seed+″ ) ″ ,50); this.Ads[ad.Seed]=ad; ad. Image.Parent=ad; ad. style.position= ″absolute″; ad. style. left=0; ad. style.top=0; ad. Image.src=imgUrl; ad. Image.onmouseover=function( ) { this.Parent.AutoMove= false; } ad. Image.onmouseout=function( ) { this.Parent.AutoMove= true; } if( strLink) { ad.href=strLink; ad.Image.border=0; ad.target= ″ _blank″; } ad.appendChild(ad.Image); document.body.appendGhild(ad); return ad; } Float:function(floatld) { var ad= this.Ads[floatld]; if( ad