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.导航菜单的展开和收起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <div class="main" id="main"> <div class="menu-box"></div> <!--子菜单--> <div class="sub-menu hide" id="sub-menu"> <!--手机--> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">手机、配件</div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 ml10">/</span> <a href="#">手机维修</a> <span class="mr10 ml10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 ml10">/</span> <a href="#">手机存储卡</a> <span class="mr10 ml10">/</span> <a href="#">数据线</a> <span class="mr10 ml10">/</span> <a href="#">充电器</a> <span class="mr10 ml10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 ml10">/</span> <a href="#">中国移动</a> <span class="mr10 ml10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 ml10">/</span> <a href="#">智能家居</a> <span class="mr10 ml10">/</span> <a href="#">智能手表</a> <span class="mr10 ml10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 ml10">/</span> <a href="#">音响</a> <span class="mr10 ml10">/</span> <a href="#">收音机</a> <span class="mr10 ml10">/</span> <a href="#">麦克风</a> </div> </div> </div> <!--电脑--> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">电脑</div> <div class="sub-row"> <span class="bold mr10">电脑通讯:</span> <a href="#">手机</a> <span class="mr10 ml10">/</span> <a href="#">手机维修</a> <span class="mr10 ml10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 ml10">/</span> <a href="#">手机存储卡</a> <span class="mr10 ml10">/</span> <a href="#">数据线</a> <span class="mr10 ml10">/</span> <a href="#">充电器</a> <span class="mr10 ml10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 ml10">/</span> <a href="#">中国移动</a> <span class="mr10 ml10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 ml10">/</span> <a href="#">智能家居</a> <span class="mr10 ml10">/</span> <a href="#">智能手表</a> <span class="mr10 ml10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 ml10">/</span> <a href="#">音响</a> <span class="mr10 ml10">/</span> <a href="#">收音机</a> <span class="mr10 ml10">/</span> <a href="#">麦克风</a> </div> </div> </div> <!--家用电器--> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家用电器</div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 ml10">/</span> <a href="#">手机维修</a> <span class="mr10 ml10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 ml10">/</span> <a href="#">手机存储卡</a> <span class="mr10 ml10">/</span> <a href="#">数据线</a> <span class="mr10 ml10">/</span> <a href="#">充电器</a> <span class="mr10 ml10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 ml10">/</span> <a href="#">中国移动</a> <span class="mr10 ml10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 ml10">/</span> <a href="#">智能家居</a> <span class="mr10 ml10">/</span> <a href="#">智能手表</a> <span class="mr10 ml10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 ml10">/</span> <a href="#">音响</a> <span class="mr10 ml10">/</span> <a href="#">收音机</a> <span class="mr10 ml10">/</span> <a href="#">麦克风</a> </div> </div> </div> <!--家具--> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家具</div> <div class="sub-row"> <span class="bold mr10">手机通讯:</span> <a href="#">手机</a> <span class="mr10 ml10">/</span> <a href="#">手机维修</a> <span class="mr10 ml10">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件:</span> <a href="#">手机壳</a> <span class="mr10 ml10">/</span> <a href="#">手机存储卡</a> <span class="mr10 ml10">/</span> <a href="#">数据线</a> <span class="mr10 ml10">/</span> <a href="#">充电器</a> <span class="mr10 ml10">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商:</span> <a href="#">中国联通</a> <span class="mr10 ml10">/</span> <a href="#">中国移动</a> <span class="mr10 ml10">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备:</span> <a href="#">智能手环</a> <span class="mr10 ml10">/</span> <a href="#">智能家居</a> <span class="mr10 ml10">/</span> <a href="#">智能手表</a> <span class="mr10 ml10">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐:</span> <a href="#">耳机</a> <span class="mr10 ml10">/</span> <a href="#">音响</a> <span class="mr10 ml10">/</span> <a href="#">收音机</a> <span class="mr10 ml10">/</span> <a href="#">麦克风</a> </div> </div> </div> </div> <!--主菜单--> <div class="menu-content" id="menu-content"> <div class="menu-item"> <a href=""> <span>手机、配件</span> <i></i> </a> </div> <div class="menu-item"> <a href=""> <span>电脑</span> <i></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用电器</span> <i></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i></i> </a> </div> </div> <!--图片轮播--> <div class="banner" id="banner"> <a href=""> <div class="banner_slide slide1 slide-active"></div> </a> <a href=""> <div class="banner_slide slide2"></div> </a> <a href=""> <div class="banner_slide slide3"></div> </a> </div> <!--上一张、下一张按钮--> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <!--圆点按钮--> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> <script src="../js/js.js"></script> </body> </html>
*{ 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{ 1200px; height: 460px; margin: 30px auto; overflow: hidden; position: relative; } .banner{ 1200px; height: 460px; position: relative; overflow: hidden; } .banner_slide{ 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; 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; 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{ 244px; height: 460px; position: absolute; left: 0; top: 0; background: rgba(7,17,27,0.5); z-index: 1; opacity: 0.5; } .menu-content{ 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{ 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{ 100%; height: 100%; background: url("../img/fe.png") no-repeat; display: none; } .sub-inner-box{ 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();