根據js輪播圖原理寫出合理的結構與樣式、並實現js互動效果
阿新 • • 發佈：2020-08-07
在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:12px; background:rgba(7, 17, 27, .4); box-shadow:0 0 0 2px rgba(255, 255, 255, .8) inset; border-radius:50%; margin-left:12px; cursor:pointer; } .dots span.active{ background:rgba(255, 255, 255, .8); box-shadow:0 0 0 2px rgba(7, 17, 27, .4) inset; } /*選單*/ .menu-box{ position: absolute; top:0; left:0; width:244px; height:460px; background:rgba(0, 0, 0, .5); z-index:1; } .main-menu{ position: absolute; top:0; left:0; width:244px; height:460px; z-index:2; } .menu-item{ height:64px; padding:0 20px; line-height:63px; } .menu-item a{ display: block; height:64px; border-bottom:1px solid rgba(255, 255, 255, .5); color:#fff; padding-left:5px; font-size:14px; position: relative; } .menu-item a i{ position: absolute; right:20px; top:2px; font-style:normal; font-weight:normal; font-family: "iconfont"; color:rgba(255, 255, 255, .8); } .sub-menu{ position: absolute; top:1px; left:244px; width:600px; height:458px; background:rgba(255, 255, 255, .8); box-shadow:0 2px 5px 0 #ccc; z-index:500; overflow:hidden; } .sub-menu .wrap{ width:100%; height:100%; padding:20px 0 0 20px; } .sub-menu-item-title{ color:red; font-weight:bold; margin-bottom:25px; } .sub-menu-row{ margin-bottom:25px; } .sub-menu-row .title{ font-weight:bold; color:#333; } .mr10{ margin-right:10px; } .ml10{ margin-left:10px; } .hide{ display: none; } /*# sourceMappingURL=style.css.map */
script.js
var index = 0, //最初索引 mindex = 0, timer = null, //定時器 main = byId("main"), mainMenu = byId("main-menu"), menuItems = mainMenu.getElementsByClassName("menu-item"),//主選單項 subMenu = byId("sub-menu"), wraps = subMenu.getElementsByClassName("wrap"),//子選單項 wsize = wraps.length, prev = byId("prev"), //獲取上一張按鈕 next = byId("next"), //獲取下一張按鈕 pics = byId("banner").getElementsByTagName("div"), //所有banner圖 dots = byId("dots").getElementsByTagName("span"), //所有圓點 size = pics.length; //banner圖的個數 //通過id獲取元素 function byId(id){ return typeof id === "string" ? document.getElementById(id) : id; } //事件繫結函式封裝 function addHandler(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type] = handler; } } //樣式切換 function 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"; } //自動輪播 function startAutoPlay(){ timer=setInterval(function(){ index++; if(index>=size) index=0; changeImg(); },1000) } //停止自動輪播 function stopAutoPlay(){ if(timer){ clearInterval(timer); } } //點選下一張按鈕 addHandler(next, "click", function(){ index++; if(index>=size) index=0; changeImg(); }); //點選上一張按鈕 addHandler(prev, "click", function(){ index--; if(index<0) index=size-1; changeImg(); }) //點選圓點切換圖片 for(var d=0;d<size;d++){ //儲存每次的索引值 dots[d].setAttribute("data-id", d); addHandler(dots[d], "click", function(){ //此處不能直接獲取d的值，由於作用域的原因，d的值是迴圈結束後的值，此處永遠是3 index=this.getAttribute("data-id"); changeImg(); }) } //預設自動輪播 startAutoPlay(); //滑鼠移入main停止輪播 addHandler(main, "mouseover", stopAutoPlay); //滑鼠移出main繼續輪播 addHandler(main, "mouseout", startAutoPlay); // 選單顯示效果 for(var m=0,mlen=menuItems.length;m<mlen;m++){ menuItems[m].setAttribute("data-mid", m); addHandler(menuItems[m], "mouseover", function(){ subMenu.className="sub-menu";//顯示子選單容器 mindex=this.getAttribute("data-mid");//this指當前觸發事件的元素 for(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, 0, 0, .2)"; }); } //滑鼠離開主選單，隱藏子選單 addHandler(mainMenu, "mouseout", function(){ subMenu.className="sub-menu hide"; }); //滑鼠離開子選單，隱藏子選單 addHandler(subMenu, "mouseout", function(){ this.className="sub-menu hide"; }); //滑鼠進入子選單，顯示子選單 addHandler(subMenu, "mouseover", function(){ this.className="sub-menu"; });
效果圖