JavaScript实现轮播特效
1.封装一个getElementById()方法
//封装一个代替getElementById()的方法function byId(id) { return typeof(id) === "string"?document.getElementById(id):id;} 2.定时器设置
——当鼠标没有在中心内容上，图片定时器开始启用，每个三秒执行一次切换图片
main.onmouseout = function () { //setTimeout超时定时器 //setInterval定时调用 timer = setInterval(function () { index++; if(index>=len){ index = 0; } //切换图片 changeImg(); }, 3000); } ——
function changeImg() { //不管元素上有没有类，className属性设置的类会重写元素上的类 //遍历banner下多有的div及dots下所有的span，将其隐藏，将span清空类 for (var i = 0; i < len ; i++) { pics[i].style.display = 'none'; dots[i].className = ""; } //根据index索引找到当前div和当前span，将其显示出来和设为当前 pics[index].style.display = 'block'; dots[index].className = 'active';} 3.图片自动轮播
4.图片的自动轮播和停止
5.点击圆点切换图片（圆点和index的绑定）
6.点击圆点切换图片（圆点和图片的绑定）
7.点击按钮切换图片
8.导航菜单的内容和样式
9.导航菜单的展开和收起
*{ margin: 0px; padding: 0px;}@font-face { font-family: "iconfont"; src:url("../img/font/iconfont.eot"); src:url("../img/font/iconfont.eot") format("embedded-opentype"), url("../img/font/iconfont.woff") format("woff"), url("../img/font/iconfont.ttf") format("truetype"), url("../img/font/iconfont.svg#iconfog") format("svg");}a:link,a:visited{ color: #5e5e5e;}a{ text-decoration: none;}body{ font-family: 微软雅黑; color: #14191e;}.main{ width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; position: relative;}.banner{ width: 1200px; height: 460px; position: relative; overflow: hidden;}.banner_slide{ width: 1200px; height: 460px; background-repeat: no-repeat; display: none; float: left;}.slide1{ background-image: url("../img/bg1.jpg");}.slide2{ background-image: url("../img/bg2.jpg");}.slide3{ background-image: url("../img/bg3.jpg");}.slide-active{ display: block;}.button{ position: absolute; width: 40px; height: 80px; left: 244px; top: 50%; margin-top: -40px; background: url("../img/arrow.png") no-repeat center center;}.prev{ transform:rotate(180deg);}.button:hover{ background-color: #333; opacity: 0.4; /*兼容其他浏览器*/ filter: alpha(opacity=80);}.next{ left: auto; /*如果left和right同时出现，谁先出现采用谁，另一个无效，要想使它有效*/ /*将有效的那个设置为auto*/ right: 0;}.dots{ position: absolute; right: 20px; bottom: 24px; text-align: center;}.dots span{ /*排布方式在一条线上*/ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background:rgba(7,17,27,0.4); /*c3新增属性 水平方向 垂直方向 阴影的距离 模糊程度 阴影的颜色 阴影设置为内置的使圆点变小*/ box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; margin-left: 8px; /*光标呈现为指示链接的指针（一只手）*/ cursor: pointer;}.dots span.active{ box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset; background-color: #fff;}.menu-box{ width: 244px; height: 460px; position: absolute; left: 0; top: 0; background: rgba(7,17,27,0.5); z-index: 1; opacity: 0.5;}.menu-content{ width: 244px; height: 454px; position: absolute; left: 0; top: 0; z-index: 2; padding-top: 6px;}.menu-item{ height: 64px; line-height: 66px; font-size: 16px; padding: 0 24px; position: relative;}.menu-item a:link,.menu-item a:visited{ color: #fff;}.menu-item a{ display: block; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0 8px; height: 63px;}.menu-item i{ font-family: iconfont; position: absolute; top: 2px; right: 32px; font-size: 24px; font-style: normal; font-weight: normal; color: rgba(255,255,255,0.5);}.sub-menu{ width: 730px; height: 458px; border: 1px solid #d9dde1; background: #fff; position: absolute; left: 244px; top: 0; z-index: 999; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}.inner-box{ width: 100%; height: 100%; background: url("../img/fe.png") no-repeat; display: none;}.sub-inner-box{ width: 652px; margin-left: 40px; overflow: hidden;}.title{ color: #f01414; font-size: 16px; line-height: 16px; margin: 28px 0 30px 0; font-weight: bold;}.sub-row{ margin-bottom: 25px;}.bold{ font-weight: bold;}.mr10{ margin-right: 10px;}.ml10{ margin-left: 10px;}.hide{ display: none;} //封装一个代替getElementById()的方法function byId(id) { return typeof(id) === "string"?document.getElementById(id):id;}//全局变量var index = 0, timer = null, pics = byId("banner").getElementsByTagName("div"), len = pics.length, dots = byId("dots").getElementsByTagName("span"), prev = byId("prev"), next = byId("next"), menu = byId("menu-content"), subMenu = byId("sub-menu"), innerBox = subMenu.getElementsByClassName("inner-box"), menuItems = menu.getElementsByClassName("menu-item");function slideImg(){ var main = byId("main"); //鼠标滑过清除定时器，离开继续 main.onmouseover = function () { //滑过清除定时器 if(timer) clearInterval(timer); } main.onmouseout = function () { //setTimeout超时定时器 //setInterval定时调用 timer = setInterval(function () { index++; if(index>=len){ index = 0; } //切换图片 changeImg(); }, 3000); } //自动在main上触发鼠标离开的事件 main.onmouseout(); //点击圆点切换图片 for (var i = 0; i < len ; i++) { //在JavaScript中function会改变作用域的，此时在function中的i是3 dots[i].id = i; dots[i].onclick = function () { index = this.id; //调用changeImg，实现切换图片 changeImg(); } } //点击下一张图片 next.onclick = function () { index++; if (index>=len) index = 0; changeImg(); } //点击上一张图片 prev.onclick = function () { index--; if (index<0) index = 2; changeImg(); } //导航菜单 //遍历主菜单，且绑定事件， for (var m = 0; m < menuItems.length ; m++) { //给每一个menu-item定义data-index属性，作为索引 menuItems[m].setAttribute("data-index",m); menuItems[m].onmouseover = function () { subMenu.className = "sub-menu"; var idx = this.getAttribute("data-index"); //遍历所有子菜单，将每一个都隐藏 for (var i = 0; i < innerBox.length ; i++) { innerBox[i].style.display = 'none'; menuItems[i].style.background = 'none'; } menuItems[idx].style.background = 'rgba(0,0,0,0.1)'; innerBox[idx].style.display = 'block'; } } menu.onmouseout = function () { subMenu.className = "sub-menu hide"; } subMenu.onmouseover = function () { this.className = "sub-menu"; } subMenu.onmouseout = function () { this.className = "sub-menu hide" }}function changeImg() { //不管元素上有没有类，className属性设置的类会重写元素上的类 //遍历banner下多有的div及dots下所有的span，将其隐藏，将span清空类 for (var i = 0; i < len ; i++) { pics[i].style.display = 'none'; dots[i].className = ""; } //根据index索引找到当前div和当前span，将其显示出来和设为当前 pics[index].style.display = 'block'; dots[index].className = 'active';}slideImg();