组长班级_组长学号_组长姓名_脚本设计-设计网站

《组长班级_组长学号_组长姓名_脚本设计-设计网站》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、成都信息工程大学官网网站脚本设计成绩：班级姓名学号二〇一四年月日目录1.幻灯片脚本设计11.1脚本功能概述11.2脚本代码11.2.1流程图11.2.2代码21.3脚本应用32.鼠标指向切换图层的脚本设计32.1脚本功能概述32.2脚本代码42.2.1流程图42.2.2代码42.3脚本应用53.新闻主页焦点图片滚动脚本设计53.1脚本功能概述53.2脚本代码53.2.1流程图53.2.2代码63.3脚本应用74.下拉菜单动画显示脚本设计74.1脚本功能概述74.2脚本代码84.2.1流程图84.2.2代码84.3脚本应用95.成员分工10成都信息工

2、程大学官网网站脚本设计1.幻灯片脚本设计1.1脚本功能概述设计两个左右切换图片的按钮，写JS脚本来实现监听按钮点击后执行的事件，比如：点击向左的箭头图片向左切换，点击向右的箭头按钮，图片向右切换，当鼠标离开显示图片的整个大的div之后，图片每3秒钟自动向右切换。1.2脚本代码1.2.1流程图~10~1.2.2代码window.onload=function(){varcontainer=document.getElementById('container');vargal=document.getElementById('gal');varprev

3、=document.getElementById('prev');varnext=document.getElementById('next');varanimated=false;vartimer;varinterval=3000;functionanimate(offset){if(offset==0){return;}animated=true;vartime=300;varinterval=10;varspeed=offset/30;varleft=parseInt(gal.style.left)+offset;vargo=function

4、(){if((speed>0&&parseInt(gal.style.left)

5、

6、(speed<0&&parseInt(gal.style.left)>left)){gal.style.left=parseInt(gal.style.left)+speed+'px';setTimeout(go,interval);}else{gal.style.left=left+'px';if(left>-1200){gal.style.left='-6000px';}if(left<-6000){gal.style.left='-1200px';

7、}animated=false;}}~10~go();}functionplay(){timer=setTimeout(function(){next.onclick();play();},interval);}functionstop(){clearTimeout(timer);}next.onclick=function(){if(animated){return;}animate(-1200);}prev.onclick=function(){if(animated){return;}animate(1200);}container.onmo

8、useover=stop;container.onmouseout=play;}1.3脚本应用应用在主页幻灯片区域1.鼠标指向切换图层的脚本设计2.1脚本功能概述当鼠标指向的不同的按钮的时候显示不同的画面，并且鼠标离开不还原~10~2.2脚本代码2.2.1流程图2.2.2代码functionsetdisplaynone(){document.getElementById("pic1").style.display="none";document.getElementById("pic2").style.display="none";document

9、.getElementById("pic3").style.display="none";document.getElementById("pic4").style.display="none";document.getElementById("img1-hover").src="../image/jdxw.png";document.getElementById("img2-hover").src="../image/zhxw.png";document.getElementById("img3-hover").src="../image/xxg

10、g.png";document.getElementById("img4-hover").src="../image/xs