在JS中，能用 . 的地方一般都可以用 [ ] 取代 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width ...
在JS中，能用 . 的地方一般都可以用 [ ] 取代
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main" id="main"> <div class="menu-box"></div> <!-- 二級菜單 --> <div class="sub-menu hide" id="sub-menu"> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">英國短毛貓</div> <span class="title mr10">英國短毛貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">英國短毛貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">英國短毛貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">英國短毛貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">暹羅貓</div> <span class="title mr10">暹羅貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">暹羅貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">暹羅貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">暹羅貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">布偶貓</div> <span class="title mr10">布偶貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">布偶貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">布偶貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">布偶貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> <div class="wrap"> <div class="sub-menu-row"> <div class="sub-menu-item-title">蘇格蘭折耳貓</div> <span class="title mr10">蘇格蘭折耳貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">蘇格蘭折耳貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">蘇格蘭折耳貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> <div class="sub-menu-row"> <span class="title mr10">蘇格蘭折耳貓：</span> <a href="">喵1</a> <span class="ml10 mr10">/</span> <a href="">喵2</a> <span class="ml10 mr10">/</span> <a href="">喵3</a> </div> </div> </div> <!-- 一級菜單 --> <div class="main-menu" id="main-menu"> <div class="menu-item"> <a href="javascript:void(0)"> 英國短毛貓<i class="icon"></i> </a> </div> <div class="menu-item"> <a href="javascript:void(0)"> 暹羅貓<i class="icon"></i> </a> </div> <div class="menu-item"> <a href="javascript:void(0)"> 布偶貓<i class="icon"></i> </a> </div> <div class="menu-item"> <a href="javascript:void(0)"> 蘇格蘭折耳貓<i class="icon"></i> </a> </div> </div> <!-- 焦點圖 --> <div class="banner" id="banner"> <!-- javascript:void(0) 不添加鏈接 --> <a href="javascript:void(0)"> <div class="banner-slide slide1 banner-active"></div> </a> <a href="javascript:void(0)"> <div class="banner-slide slide2"></div> </a> <a href="javascript:void(0)"> <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="script.js"></script> </body> </html>
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 */ src: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'), /* 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; margin:30px auto; position: relative; } /*焦點圖*/ .banner{ width:1200px; height:460px; overflow:hidden; } .banner-slide{ width:1200px; height:460px; float:left; overflow:hidden; background:center no-repeat; display: none; } .banner-active{ display: block; } .slide1{ background-image:url(source/banner1.jpg); } .slide2{ background-image:url(source/banner2.jpg); } .slide3{ background-image:url(source/banner3.jpg); } .button{ width:40px; height:80px; position: absolute; top:50%; left:244px; margin-top:-40px; background:url(source/arrow.png) center center no-repeat; cursor:pointer; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } .button:hover{ background-color:rgba(100, 100, 100, .7); } .button.next{ right:0; left:auto; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .dots{ position: absolute; right:24px; bottom:24px; } .dots span{ display: inline-block; width:12px; height:
