JavaScript实现网站首页动态效果

使用JS做一个首页，主要效果有轮播，遮罩弹框，广告栏定时消失，消息自动循环播放等。

广告栏设置10s定时消失，主要思路是修改其上边距，设置一个定时器，1s运行一次，10s后将其上移到屏幕外并移除

主要js代码：

var adTop = document.getElementById('advTop');var adTopEm = adTop.getElementsByTagName('em')[0];var ad_i = adTop.getElementsByTagName('i')[0];function adTime(num) {num--;adTopEm.innerHTML= num;if(num==0) {ad_0(0);return;}return setTimeout(function () {adTime(num)},1000);}//广告栏自动消失function ad_0(height) {height+=5;if(height<=130){adTop.style.marginTop=-height+"px";return setTimeout(function () {ad_0(height)},30);}else{adTop.parentNode.removeChild(adTop);}}//广告栏点击叉消失ad_i.onclick=function () {ad_0(0);}adTime(10);

点击“青海”可以弹出地区选框，选中地区将会显示

主要js代码

    /*城市切换样式*/var cityAll = document.getElementById('cityAll');var cityUL = cityAll.getElementsByTagName('ul');var cityLI = cityUL[1].getElementsByTagName('li');var city_x = document.getElementById('city_x');var select_city = document.getElementById('select_city');/*找到对应的ul城市列表，显示对应的一个，其他影藏*/for(var i=0;i<cityLI.length;i++){cityLI[i].onclick=(function (j) {  /*闭包,j就是当前li的位置*/return function () {if(cityLI.className=='area_cur'){return; //直接跳出}var newNum=j,oldNumfor(var k=0;k<cityLI.length;k++){if(cityLI[k].className=='area_cur'){oldNum=k;break; //跳出}}cityLI[newNum].className='area_cur';cityLI[oldNum].className='';cityUL[newNum+2].style.display='';cityUL[oldNum+2].style.display='none';}})(i);}//点击叉，使得灰色遮罩以及城市选矿消失city_x.onclick=function () {cityUp(0);}function cityUp(num) {num+=10;if(num<=100){cityAll.style.marginTop = -num+'%';return setTimeout(function () {cityUp(num);},20);}else{cityAll.display='none';}}select_city.onclick = function () {citydown(0);}function citydown(num) {if(num==0)cityAll.display=''; //显示num+=5;if(num<=100){cityAll.style.marginTop = (-100+num)+'%';return setTimeout(function () {citydown(num);},20);}}//点击城市显示到banner中//遍历ul,匿名函数，保证i是局部变量(function () {for(var i=0;i<cityUL.length;i++){if(cityUL[i].className=='city_nav')continue; //跳过字母栏var lis = cityUL[i].getElementsByTagName('li');for(var j=0;j<lis.length;j++){lis[j].onclick=function () {var text = this.innerText || this.textContent ;  //前者支持IE,后者支持非IEselect_city.getElementsByTagName('i')[1].innerHTML=text;cityUp(0); //切换城市后，遮罩自动消失}}}})();

轮播效果，实现自动轮播，鼠标移入停止，移出恢复自动轮播，鼠标移到右下方原点切换对应图片

    //  轮播淡入淡出效果(function () {var index_one_lb = document.getElementById('index_one_lb');var indexUL = index_one_lb.getElementsByTagName('ul');var indexLi1 = indexUL[0].getElementsByTagName('li');  //图片var indexLi2 = indexUL[1].getElementsByTagName('li');  //按钮for(var i=0;i<indexLi2.length;i++){indexLi2[i].onmouseover=(function (j) {   //注意i别掉了return function () {if(this.className == 'index_bcur'){return;}var newNum = j ,oldNum ;   //newNum当前位置，oldNum之前位置for(var kk = 0; kk < indexLi2.length; kk++){if(indexLi2[kk].className =='index_bcur'){oldNum = kk;}}indexLi2[newNum].className ="index_bcur";indexLi2[oldNum].className = "";//淡入淡出OpacityLB(0,newNum,oldNum);}})(i);}//淡入淡出效果function OpacityLB(num,newNum,oldNum) { //num表示递归起始值 //newNum当前位置，oldNum之前位置//加层级indexLi1[newNum].className="index_0_mImgCur";indexLi1[newNum].className="";num+=10;if(num<=100){indexLi1[newNum].style.opacity = num/100;indexLi1[newNum].style.fliter = 'alpha(opacity='+num+')';indexLi1[oldNum].style.opacity = 1-num/100;indexLi1[oldNum].style.fliter = 'alpha(opacity='+(100-num)+')';return setTimeout(function () {OpacityLB(num,newNum,oldNum);},20);}}function OpacityLB_Auto() {var newNum  ,oldNum ; //newNum当前位置，oldNum之前位置var last = indexLi2.length - 1; //最后一张图for(var x=0;x < indexLi2.length; x++ ){if(indexLi2[x].className == "index_bcur"){  //如果按钮选中oldNum = x;}}if(oldNum!=last){newNum = oldNum + 1;}else{newNum = 0;}//切换按钮indexLi2[newNum].className ="index_bcur";indexLi2[oldNum].className = "";//淡入淡出OpacityLB(0,newNum,oldNum);}var oAuto =  setInterval(OpacityLB_Auto,3000); //每隔3s运行一次//进入大div后把自动效果移除index_one_lb.onmouseover = function () {clearInterval(oAuto);}index_one_lb.onmouseout = function () {oAuto =  setInterval(OpacityLB_Auto,3000); //每隔3s运行一次}})();

4.鼠标滑过标题栏，切换右侧内容效果

    //第三栏 右侧弹出列表(function () {var indexOneLnav = document.getElementById("indexOneLnav");var indexOneLis = indexOneLnav.getElementsByTagName("li");//判断鼠标在那一栏，那一栏弹出for(var i=0;i<indexOneLis.length;i++){//鼠标移入事件indexOneLis[i].onmouseover=(function (j) {return function () {//加入css样式console.log('index_one_ll'+(j+1)+' index_one_ll'+(j+1)+'Cur');console.log(this.className);var nn = 'index_one_ll'+(j+1)+' index_one_ll'+(j+1)+'Cur' //nn:样式名 两个样式间加一个空格this.className = nn ;//找到要显示的divvar chNodes = this.childNodes;for(var k=0;k<chNodes.length;k++){if(chNodes[k].className=='index_one_lMain'){chNodes[k].style.display='';break;}}}})(i);//鼠标移出事件indexOneLis[i].onmouseout=(function (j) {return function () {//加入css样式this.className+=this.className.substring(0,this.className.lastIndexOf(' ')) ; //截取空格之前的样式//找到要显示的divvar chNodes = this.childNodes;for(var k=0;k<chNodes.length;k++){if(chNodes[k].className=='index_one_lMain'){chNodes[k].style.display='none';break;}}}})(i);}})();

消息栏自动播放效果

    //盒子向上滚动效果(function () {var laterRateScorll = document.getElementById('laterRate_scorll');var laterRateScorllLis = laterRateScorll.getElementsByTagName('li');function scrollTop(num) {num+=2;if(num<=72){laterRateScorllLis[0].style.marginTop = -num+'px';  // num<=72 : 72为 li 盒子的高度return setTimeout(function () {scrollTop(num); },20)   //每隔20ms触发一次}else{laterRateScorll.appendChild(laterRateScorllLis[0]);laterRateScorllLis[laterRateScorllLis.length-1].style.marginTop = 0+'px';}}var sDo = setInterval(function () {scrollTop(0);},2000);//鼠标移进去时停止，移出时运行laterRateScorll.onmouseover=function () {clearInterval(sDo);}laterRateScorll.onmouseout=function () {sDo = setInterval(function () {scrollTop(0);},2000);}})();

JavaScript实现网站首页动态效果相关推荐

HTML5期末大作业：游戏网站网站设计——仙灵游戏网站首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品
HTML5期末大作业:游戏网站网站设计--仙灵游戏网站首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
阴阳师项目网站首页(动态网页）原生HTML+CSS+Javascript
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录. 1.1.1 css文件夹 1.1.2 images文件 1.1.3 js文件 1.1.4 font 1.2 HTML ...
网站不大但加载很慢怎么优化_博客网站首页加载优化
Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用,其他就是对接口优化等 1. ve ...
网站首页js幻灯片代码
JS图片幻灯片,网站首页专用的图片特效代码,旅游网站用着最合适了,支持图片说明,每一幅图片都可以加标题和简短的文字介绍,右下角有图片切换控制按钮,示例中仅有5张图片,不过在实际应用中,你可以添加更多的 ...
一个LED圣诞装饰灯网站首页及产品分类页代码
项目地址: https://www.cn-da-di.com/ https://www.cn-da-di.com/product/led-copper-wire-light/ 网站首页效果图: HTM ...
用HTML+CSS编写一个计科院网站首页的静态网页
用HTML+CSS编写一个计科院网站首页的静态网页利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本. 项目的文件目录最终效果 <!DOCTYPE ...
HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)
HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
html+css网站首页实战
html+css网站首页实战 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ch ...

JavaScript实现网站首页动态效果

JavaScript实现网站首页动态效果相关推荐

最新文章

热门文章