在JS中，能用 . 的地方一般都可以用 [ ] 取代
index.html
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</link rel="stylesheet" href="style.css"bodydiv class="main" id="main"> ="menu-Box"></div<!-- 二级菜单 --> ="sub-menu hide"="sub-menu"> ="wrap"> ="sub-menu-row"> ="sub-menu-item-title">英国短毛猫span ="title mr10">英国短毛猫：spana href="">喵1a="ml10 mr10">/>喵2>喵3>暹罗猫>暹罗猫：>布偶猫>布偶猫：>苏格兰折耳猫>苏格兰折耳猫： 一级菜单 ="main-menu"="main-menu"="menu-item"="javascript:void(0)"> 英国短毛猫i ="icon">i 暹罗猫 布偶猫 苏格兰折耳猫 焦点图 ="banner"="banner" javascript:void(0) 不添加链接 --> ="banner-slide slide1 banner-active"="banner-slide slide2"="banner-slide slide3" 左右箭头 ="javascript:void(0)" class="button prev"="prev"="button next"="next" 切换点 ="dots"="dots"="active"script src="script.js"scripthtml>
style.css
*{ margin:0; padding:0; } a{ text-decoration:none; color:#333; } @font-face {font-family: "iconfont"; src:url('source/font/iconfont.eot?t=1581168967831'); /* IE9 */url('source/font/iconfont.eot?t=1581168967831#iefix') format('embedded-opentype'), IE6-IE8 */ url('source/font/data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABkgAAAJLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApQYwE2AiQDCAsGAAQgBYRtBzQbjQXIHpIkRSIVUICEKgjCM+Lhaz/25+4uJhLpnkyTSSIUGkQSxEbpTIcvJbx799P7HZPN82U5ILLFS5p+zr+SG4Ea27ElozdhULjJrQCCfeLe6Z9AH2TUA8pxLxpr0qQuoC4OpID2xiiyIom9YeyCF/iYQKNrftrW+OwqVCvsVYF4liIB1YWQorBsvVDbcLCITzXq03t6Az6i78d/0agmqcnsusOnsTQM/lQ6efm12nAREMIEdLwGGctAIU4bU/vKBOPKNKbKTYJjVQc/lVUVOMVR/zxRy65sBsNQ/kwKT/mo2QSPNVI3MDhpMtHt8cuj840OTPsXXxx3iasu7ert/+T1kbf/tOWvL+/ORVv8e/zlpqVV420wCFBNVR4CDcH27dV8rKn3r76pgO/0xwQJVIthHlC/F3fwNxQDu4qhsh2paIrG/qT7LA2NGlHBvk4/U809p86Fej0TPHVGMmT1psnCLqNGkxXUqreKRksmjjfpopSJ0oBFuwCh3ROSVl/I2r2Thf1GjV6/qNUeZWh0Hm0XNpkNWTuiMEGYZskSkynb4q6LauPqZRQ5I6HyqohfR+XJKIsEw+XsBFqoltji5UWUiDOubJONg+fQMGzmKDuLKQpmiJzuUIg3vSmYsk2otUlBCQSlMUkljjris/BgMKmtfH4ZEnIMCaqjoy67DikeOT4TERQeQE7orUEdj/KKJ0+IIoRjOMVmYsbBPGQw2BineV4WSiFBmQkJR7eQ04sP1Qe3N5p/dwga2ZYUzqSs8cXOZWXCotAGAAAAAA==') format('woff2'),url('source/font/iconfont.woff?t=1581168967831') format('woff'),url('source/font/iconfont.ttf?t=1581168967831') format('truetype'),1)"> chrome,firefox,opera,Safari,Android,iOS 4.2+ url('source/font/iconfont.svg?t=1581168967831#iconfont') format('svg'); iOS 4.1- */ } .main{ width:1200px; height:460px;30px auto; position: relative; } 焦点图*/ .banner{ overflow:hidden; } .banner-slide{ float:left;hidden; background:center no-repeat; display: none; } .banner-active{ block; } .slide1{ background-image:url(source/banner1.jpg); } .slide2{url(source/banner2.jpg); } .slide3{url(source/banner3.jpg); } .button{40px;80px; absolute; top:50%; left:244px; margin-top:-40px;url(source/arrow.png) center center no-repeat; cursor:pointer; -webkit-transform:rotate(180deg); -moz-transform: -ms-transform: -o-transform: transform:rotate(180deg); } .button:hover{ background-color:rgba(100,100,.7); } .button.next{ right:auto;rotate(0deg);rotate(0deg); } .dots{24px; bottom:24px; } .dots span{ inline-block;12px;rgba(7,17,27,.4); Box-shadow:0 0 0 2px rgba(255,.8) inset; border-radius: margin-left:pointer; } .dots span.active{rgba(255,.8);0 0 0 2px rgba(7,.4) inset; } 菜单 .menu-Box{rgba(0,.5); z-index:1; } .main-menu{2; } .menu-item{64px;0 20px; line-height:63px; } .menu-item a{ block; border-bottom:1px solid rgba(255,1)">#fff; padding-left:5px; font-size:14px; relative; } .menu-item a i{20px;2px; font-style:normal; font-weight: font-family: .sub-menu{1px;600px;458px;0 2px 5px 0 #ccc;500; .sub-menu .wrap{100%;20px 0 0 20px; } .sub-menu-item-title{red;bold; margin-bottom:25px; } .sub-menu-row{ .sub-menu-row .title{ .mr10{ margin-right:10px; } .ml10{ .hide{ none; } # sourceMappingURL=style.css.map */
script.js
var index = 0,//最初索引 mindex = 0,timer = null,1)">定时器 main = byId("main"),mainMenu = byId("main-menu"主菜单项 subMenu = byId("sub-menu"子菜单项 wsize = wraps.length,prev = byId("prev"),1)">获取上一张按钮 next = byId("next"),1)">获取下一张按钮 pics = byId("banner").getElementsByTagName("div"),1)">所有banner图 dots = byId("dots").getElementsByTagName("span"),1)">所有圆点 size = pics.length; banner图的个数 通过id获取元素 function byId(id){ return typeof id === "string" ? document.getElementById(id) : id; } 事件绑定函数封装 addHandler(ele,type,handler){ if(ele.addEventListener){ ele.addEventListener(type,handler,1)">false); }else (ele.attachEvent){ ele.attachEvent("on"+type,handler); }else{ ele["on"+type] = handler; } } 样式切换 changeImg(){ for(var i=0;i<size;i++){ pics[i].style.display="none"; dots[i].className=""; } pics[index].style.display="block"; dots[index].className="active"; } 自动轮播 startAutoplay(){ timer=setInterval((){ index++; if(index>=size) index=0; changeImg(); },1000) } 停止自动轮播 stopAutoplay(){ (timer){ clearInterval(timer); } } 点击下一张按钮 addHandler(next,"click",1)">(){ index++; ; changeImg(); }); 点击上一张按钮 addHandler(prev,1)">(){ index--if(index<0) index=size-1; changeImg(); }) 点击圆点切换图片 var d=0;d<size;d++){ 存储每次的索引值 dots[d].setAttribute("data-id"(){ 此处不能直接获取d的值，由于作用域的原因，d的值是循环结束后的值，此处永远是3 index=this.getAttribute("data-id"); changeImg(); }) } 默认自动轮播 startAutoplay(); 鼠标移入main停止轮播 addHandler(main,"mouSEOver"utoplay); 鼠标移出main继续轮播 addHandler(main,"mouSEOut"utoplay); 菜单显示效果 var m=0,mlen=menuItems.length;m<mlen;m++){ menuItems[m].setAttribute("data-mid"SEOver",1)">(){ subMenu.className="sub-menu";显示子菜单容器 mindex=this.getAttribute("data-mid");this指当前触发事件的元素 var w=0;w<wsize;w++){ wraps[w].style.display="none"; menuItems[w].style.background="none"; } wraps[mindex].style.display="block"; menuItems[mindex].style.background="rgba(0,.2)"; }); } 鼠标离开主菜单，隐藏子菜单 addHandler(mainMenu,"mouSEOut",1)">(){ subMenu.className="sub-menu hide"; }); 鼠标离开子菜单，隐藏子菜单 addHandler(subMenu,1)">(){ this.className="sub-menu hide"鼠标进入子菜单，显示子菜单 addHandler(subMenu,"mouSEOver",1)">this.className="sub-menu"; });
效果图
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
