影城首页动效制作（JavaScript）

围绕 JavaScript 核心知识点开展实操训练帮助掌握变量、运算符、分支与循环语法、DOM 元素获取、事件应用、定时器轮播及元素属性操作结合影城首页动态效果开发综合项目融合理论与实践提升实操开发水平培养严谨的程序逻辑思维实现独立完成页面交互动态效果设计。一本案例需要我们通过使用JavaScript使首页“动起来”。在这个影城首页中需要用JS制作动效的地方有6部分banner轮播图、快速购票鼠标移入“选择”显示隐藏的选项、正在热映和即将上映菜单切换、鼠标悬停到影片上显示影片详情、影城活动鼠标移动到影片显示对应的大图、品牌资讯鼠标悬停显示对应的图片。这里将使用外部引入js文件的形式应用到HTML文档中实现页面行为层与结构层的分离。在项目js目录下新建一个.js文件并命名为“main.js”然后在“index.html”的head中使用script标签将此js文件引进来如下所示。script srcjs/main.js typetext/javascript/scriptBanner轮播图我们在浏览网页时经常会看到几张图片来回切换的效果那么轮播图的动效到底有哪些部分呢一般有以下四部分。①页面加载完成后图片自动播放。②播放时图片上对应的切换按钮也会自动切换并且当前的按钮显示为红色。③当鼠标单击切换按钮时切换到当前banner图片并且当前的按钮显示为红色④当鼠标移入到banner图片时停止自动播放当鼠标移出banner图片时轮播图继续自动播放。请写出JS代码实现以下这些效果。自动播放功能对于自动播放可以通过开启定时器来实现因为自动播放功能需要在页面加载、鼠标移出按钮、移出banner图时都应用所以在写的时候我们一般通过方法调用的形式来应用。实现过程先编写页面加载函数本页面的所有js代码都要写在此函数中。然后获取轮播图片动态设置轮播图所在的ul列表的宽通过改变ul的left值来控制当前显示哪张图片。2按钮图标轮播切换由于在自动播放时需要图片上对应的切换按钮也自动切换并且当前的按钮显示为红色。上面代码中的setStyle()方法就是用来设置选中时按钮的状态其思路就是为当前按钮添加classactive其他按钮不添加。我们将写在切换按钮第一个li标签内的classactive删除掉通过js动态添加。在上面的js代码中继续编写按钮图标轮播切换效果。3单击切换轮播图片接下来继续实现鼠标单击切换按钮时切换到当前banner图片并改变当前按钮颜色。轮播图鼠标移入移出效果继续实现当鼠标移入到banner图片时停止自动播放当鼠标移出banner图片时轮播图继续自动播放。至此轮播图的功能就实现完了轮播图是我们在做页面时经常会用到的希望大家能理解其中的思路。“快速购票”鼠标移入动态显示选项框快速购票部分的实现效果如下图所示它的实现有三部分。①鼠标移入选择菜单只显示其对应的div。②当鼠标移入div内部时div仍然显示。③当鼠标移出div和选择菜单时div隐藏。由于我们的div和选择菜单都是在一个li中所以此部分的代码可以添加给li。请在onload中编写快速购票的代码。“正在热映”和“即将上映”菜单切换单击标题更改当前标题的背景颜色并显示当前标题对应的影片列表其他标题字体不变且影片列表块都隐藏。实现思路整体和“快速购票”模块一样关键点还是记录当前单击的标题的索引。不同点在于“快速购票”模块的所有选项框div开始都是隐藏的当鼠标移入、移出时只用设置当前对应的选项框div的display即可不用管其他的选项框div的display状态是什么。但是对于“正在热映”和“即将上映”这种菜单切换在最开始时“正在热映”影片列表块显示其余的列表块都隐藏。当鼠标单击某个菜单时当前的列表块显示其余的列表块都需要隐藏。也就是说你不仅要考虑当前列表块的状态还要考虑其他列表块的状态。要实现这样的菜单切换思路就是外层循环遍历所有的菜单为每个菜单都添加鼠标单击事件当鼠标单击某个菜单时再内层循环遍历所有的列表块设置所有的列表块都隐藏只设置当前的列表块显示。请在onload中编写该部分js代码。鼠标悬停到影片上显示影片详情该部分的实现思路与“快速购票”模块一样当鼠标移入到影片上时显示该影片的遮罩层div移除后隐藏。请给出该部分的js代码。影城活动鼠标移动到影片显示对应的大图该模块的实现思路是获取大图和指示块小图当鼠标移入到某个小图中时更改其字体颜色并更改其对应的大图的层叠顺序使其显示。请给出该部分的js代码。品牌资讯鼠标悬停显示对应的图片该模块的实现思路同“快速购票”模块 请给出该部分的js代码。1banner轮播图 window.onload function () { //1,banner部分图片轮播效果 var oul document.getElementsByClassName(main_content)[0]; var liArray oul.getElementsByTagName(li); oul.style.width 990 * liArray.length px; var timer; var index 0; var tabUl document.getElementsByClassName(tab)[0]; var tabArray tabUl.getElementsByTagName(li); tabArray[index].className active; //函数调用 autoMove(); //点击tab切换按钮来切换图片 //先遍历所有的切换按钮 for (var i 0; i tabArray.length; i) { tabArray[i].index i; tabArray[i].onclick function () { clearInterval(timer); index this.index; oul.style.left -999 * index px; setStyle(); } } //设置鼠标移入移出轮播图时的效果 // for(var j0;jliArray.length;j){ // //鼠标移入时清除定时器停止播放 // liArray[j].onmouseoverfunction(){ // clearInterval(timer); // //鼠标移出时自动播放 // this.onmouseoutfunction(){ // autoMove(); // } // } oul.onmousdeover function () { clearInterval(timer); } oul.onmouseout function () { autoMove(); } //每隔3秒自动播放 function autoMove() { timer setInterval(function () { index; if (index liArray.length) { index 0 } oul.style.left -990 * index px; setStyle(); }, 3000); } function setStyle() { for (var j 0; j tabArray.length; j) { tabArray[j].className ; } tabArray[index].className active; } 2快速购票鼠标移入“选择”显示隐藏的选项 //2,快速购票鼠标移入展开div,鼠标移开后再次隐藏 //获取所有的li列表 var ticketLi document.getElementsByClassName(ticket)[0].getElementsByTagName(li); //获取隐藏的div var divSelect document.getElementsByClassName(hide_select); //遍历所有的隐藏菜单 for (var i 0; i ticketLi.length; i) { ticketLi[i].index i; ticketLi[i].onmouseover function () { divSelect[this.index].style.display block; } ticketLi[i].onmouseout function () { divSelect[this.index].style.display none; } } 3正在热映和即将上映菜单切换 //3,正在热映和即将上映影片切换 //获取切换按钮span var allSpan document.querySelectorAll(.section .title span); var moveList document.getElementsByClassName(move_list); allSpan[0].className bgRed; for (var i 0; i allSpan.length; i) { allSpan[i].index i; allSpan[i].onclick function () { for (var j 0; j moveList.length; j) { moveList[j].style.display none; allSpan[j].className ; } moveList[this.index].style.display block; allSpan[this.index].className bgRed; } } 4鼠标悬停到影片上显示影片详情 //4,鼠标悬停到影片上显示影片详情 //获取影片图片所在的li var item document.getElementsByClassName(item); var filmHide document.getElementsByClassName(film_hide); for (var i 0; i item.length; i) { item[i].index i; item[i].onmouseover function () { filmHide[this.index].style.display block } item[i].onmouseout function () { filmHide[this.index].style.display none; } } 5影城活动鼠标移动到影片显示对应的大图 //5,影城活动鼠标移入小图标对应字体变红上方显示对应的大图 //获取轮播大图 var bd document.getElementsByClassName(bd)[0]; var bdArray bd.getElementsByTagName(li); //获取指示块 var indicate document.getElementsByClassName(indicate)[0]; var indicateLi indicate.getElementsByTagName(li); //获取字体p var p indicate.getElementsByTagName(p); //遍历所有的指示块 for (var i 0; i indicateLi.length; i) { indicateLi[i].index i; indicateLi[i].onmouseover function () { bdArray[this.index].style.zIndex 99; p[this.index].style.color red; } indicateLi[i].onmouseout function () { bdArray[this.index].style.zIndex 2; p[this.index].style.color #666666; } } 6“品牌资讯鼠标悬停显示对应的图片 //6、品牌资讯鼠标移入显示图片移出隐藏 var newList document.getElementsByclassName(newList)[0]; var newListA newList.getElementsByTagName(a); var newList_img newList.getElementsByTagName(img); for (var i 0; i newListA.length; i) { newListA[i].index i; newListA [i].onmouseover function () { newList_img[this.index].style.display block; } newListA[i].onmouseout function () { newList_img[this.index].style.display none; } } }