javascript實現點選按鈕切換輪播圖功能
阿新 • • 發佈:2020-09-24
本文例項為大家分享了js實現點選按鈕切換輪播圖的具體程式碼,供大家參考,具體內容如下
選單區域實現
劃過主選單顯示子選單
輪播區域實現
1、點選圖片中左右箭頭,分別跳轉上一張與下一張
(1)點選上一張圖其實就是讓一個變數進行遞減,點選下一張圖就是讓變數遞增;(控制索引最大最小值)
2、點選右下角小圓也可以進行圖片的跳轉
(1)通過索引讓變數進行隨意的修改
3、每間隔3s進行輪播圖的自動切換,滑鼠放在圖片上清除自動切換
(1)定時器
4、滑鼠放在主選單上顯示子選單,離開子選單消失。
放在子選單上顯示子選單,離開消失。
原始碼:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="main" id="main"> <!-- 主選單背景 --> <div class="menu-box"></div> <!-- 主選單 --> <div class="menu-content" id="menu-content"> <div class="menu-item"> <a href=""> <span>手機、配件</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>電腦</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用電器</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>傢俱</span> <i class="icon"></i> </a> </div> </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="ml10 mr10">/</span> <a href="">手機維修</a> <span class="ml10 mr10">/</span> <a href="">以舊換新</a> </div> <div class="sub-row"> <span class="bold mr10">手機配件:</span> <a href="">手機殼</a> <span class="ml10 mr10">/</span> <a href="">手機儲蓄卡</a> <span class="ml10 mr10">/</span> <a href="">資料線</a> <span class="ml10 mr10">/</span> <a href="">充電器</a> <span class="ml10 mr10">/</span> <a href="">電池</a> </div> <div class="sub-row"> <span class="bold mr10">運營商:</span> <a href="">中國聯通</a> <span class="ml10 mr10">/</span> <a href="">中國移動</a> <span class="ml10 mr10">/</span> <a href="">中國電信</a> </div> <div class="sub-row"> <span class="bold mr10">智慧裝置:</span> <a href="">智慧手環</a> <span class="ml10 mr10">/</span> <a href="">智慧家居</a> <span class="ml10 mr10">/</span> <a href="">智慧手錶</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娛樂:</span> <a href="">耳機</a> <span class="ml10 mr10">/</span> <a href="">音響</a> <span class="ml10 mr10">/</span> <a href="">收音機</a> <span class="ml10 mr10">/</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="ml10 mr10">/</span> <a href="">平板</a> <span class="ml10 mr10">/</span> <a href="">一體機</a> </div> <div class="sub-row"> <span class="bold mr10">電腦配件:</span> <a href="">顯示器</a> <span class="ml10 mr10">/</span> <a href="">CPU</a> <span class="ml10 mr10">/</span> <a href="">主機板</a> <span class="ml10 mr10">/</span> <a href="">硬碟</a> <span class="ml10 mr10">/</span> <a href="">電源</a> <span class="ml10 mr10">/</span> <a href="">顯示卡</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">遊戲裝置:</span> <a href="">遊戲機</a> <span class="ml10 mr10">/</span> <a href="">耳機</a> <span class="ml10 mr10">/</span> <a href="">遊戲軟體</a> </div> <div class="sub-row"> <span class="bold mr10">網路產品:</span> <a href="">路由器</a> <span class="ml10 mr10">/</span> <a href="">網路機頂盒</a> <span class="ml10 mr10">/</span> <a href="">交換機</a> <span class="ml10 mr10">/</span> <a href="">儲存卡</a> <span class="ml10 mr10">/</span> <a href="">網絡卡</a> </div> <div class="sub-row"> <span class="bold mr10">外部產品:</span> <a href="">滑鼠</a> <span class="ml10 mr10">/</span> <a href="">鍵盤</a> <span class="ml10 mr10">/</span> <a href="">U盤</a> <span class="ml10 mr10">/</span> <a href="">行動硬碟</a> <span class="ml10 mr10">/</span> <a href="">滑鼠墊</a> <span class="ml10 mr10">/</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="ml10 mr10">/</span> <a href="">韓國品牌</a> <span class="ml10 mr10">/</span> <a href="">歐美品牌</a> </div> <div class="sub-row"> <span class="bold mr10">空調:</span> <a href="">顯示器</a> <span class="ml10 mr10">/</span> <a href="">櫃式</a> <span class="ml10 mr10">/</span> <a href="">中央</a> <span class="ml10 mr10">/</span> <a href="">壁掛式</a> </div> <div class="sub-row"> <span class="bold mr10">冰箱:</span> <a href="">多門</a> <span class="ml10 mr10">/</span> <a href="">對開門</a> <span class="ml10 mr10">/</span> <a href="">三門</a> <span class="ml10 mr10">/</span> <a href="">雙門</a> </div> <div class="sub-row"> <span class="bold mr10">洗衣機:</span> <a href="">滾筒式洗衣機</a> <span class="ml10 mr10">/</span> <a href="">迷你洗衣機</a> <span class="ml10 mr10">/</span> <a href="">洗烘一體機</a> </div> <div class="sub-row"> <span class="bold mr10">廚房電器:</span> <a href="">抽菸機</a> <span class="ml10 mr10">/</span> <a href="">洗碗機</a> <span class="ml10 mr10">/</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="ml10 mr10">/</span> <a href="">枕頭</a> <span class="ml10 mr10">/</span> <a href="">四件套</a> <span class="ml10 mr10">/</span> <a href="">床墊</a> </div> <div class="sub-row"> <span class="bold mr10">燈具:</span> <a href="">檯燈</a> <span class="ml10 mr10">/</span> <a href="">頂燈</a> <span class="ml10 mr10">/</span> <a href="">節能燈</a> <span class="ml10 mr10">/</span> <a href="">應急燈</a> </div> <div class="sub-row"> <span class="bold mr10">廚具:</span> <a href="">烹飪鍋具</a> <span class="ml10 mr10">/</span> <a href="">餐具</a> <span class="ml10 mr10">/</span> <a href="">菜板刀具</a> </div> <div class="sub-row"> <span class="bold mr10">家裝:</span> <a href="">地毯</a> <span class="ml10 mr10">/</span> <a href="">沙發墊套</a> <span class="ml10 mr10">/</span> <a href="">裝飾字畫</a> <span class="ml10 mr10">/</span> <a href="">照片牆</a> <span class="ml10 mr10">/</span> <a href="">窗簾</a> </div> <div class="sub-row"> <span class="bold mr10">生活日用:</span> <a href="">收納用品</a> <span class="ml10 mr10">/</span> <a href="">浴室用品</a> <span class="ml10 mr10">/</span> <a href="">雨傘雨衣</a> </div> </div> </div> </div> <!-- 焦點圖 --> <div class="banner" id="banner"> <!-- 滑鼠懸停停止自動輪播的區域 --> <section class="cease" id="cease"></section> <a href=""> <div class="banner-slide slide1"></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> </body> </html>
css
*{ margin: 0; padding: 0; } /*萬用字元選擇器,外邊距,內邊距為0*/ body{ font-family: "微軟雅黑"; color: #14191e; } /*字型,字型顏色*/ @font-face{ font-family: 'iconfont';/*自定義名稱,要有意義,不準數字*/ src: url('../font/iconfont.eot');/*相容ie9以上版本*/ src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/*相容ie6-8版本*/ url('../font/iconfont.ttf') format('truetype'),/*主要針對手機端瀏覽器 safari android ios*/ url('../font/iconfont.woff') format('woff'),/*相容所有瀏覽器 */ url('../font/iconfont.svg#iconfont') format('svg');/*針對ios端開發 legacy ios*/ /* font-weight: bold;<字型加粗> font-style: normal;預設的正常顯示*/ } /*獲取下載的字型*/ a{ text-decoration: none; } /*沒有下劃線*/ a:link,a:visited{ color: #5e5e5e; } /*聯合選擇器,未訪問連線時與已經訪問連結時的字型顏色*/ .main{ width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; position: relative; } /*最大框架:寬;高;外邊距,上下30px,左右居中;溢位的部分隱藏;相對定位*/ .banner{ width: 1200px; height: 460px; overflow: hidden; cursor: pointer; } /*焦點圖:寬;高;溢位的部分隱藏;小手標誌*/ .banner-slide{ width: 1200px; height: 460px; float: right; background-repeat: no-repeat; display: none; } /*三個圖片:寬;高;右浮動,背景不重複;全部隱藏*/ .slide1{ background-image: url(../img/bg1.jpg); display: block; } /*第一個圖片;塊級元素顯示*/ .slide2{ background-image: url(../img/bg2.jpg); } /*第二個圖片*/ .slide3{ background-image: url(../img/bg3.jpg); } /*第三個圖片*/ .button{ position: absolute; width: 40px; height: 80px; right: 0; background: url(../img/arrow.png) center center no-repeat; top: 50%; margin-top: -40px; } /*左右兩個按鈕;寬;高;相對main絕對定位,距右0,距上50%;背景圖片,水平垂直居中,不重複;外上邊距-40px;*/ .button:hover{ background-color: #333; opacity: 0.8; filter: alpha(opacity=80); } /*滑鼠懸浮在上面時狀態:背景顏色,透明度。照顧IE瀏覽器*/ .prev{ left: 244px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /*左按鈕相對上面:靠左244px,定位左的優先順序高於右;旋轉180度*/ .dots{ position: absolute; right: 24px; bottom: 24px; line-height: 12px; } /*下面三個選擇圓:相對main絕對定位,距右,距下,行間距12px;*/ .dots span{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(7,17,27,.4); margin-left: 8px; box-shadow: 0 0 0 2px rgba(255,255,.8) inset; cursor: pointer; } /*子孫後代選擇器:轉換為塊級元素並列一排;寬;高;削圓;背景顏色;外左邊距,讓他們之間有距離;盒子陰影,水平偏移量,垂直偏移量,模糊度,擴充套件多少,顏色模糊度,內陰影;小手標誌*/ .dots .active{ background-color: #fff; box-shadow: 0 0 0 2px rgba(255,.4) inset; } /*背景顏色,同上*/ .menu-box{ position: absolute; left: 0; top: 0; width: 244px; height: 460px; background: rgba(7,.3); z-index: 1; } /*主選單背景,相對main絕對定位,左上偏移;寬;高;背景顏色模糊度;層疊模式數字大的在上面顯示*/ .menu-content{ position: absolute; left: 0; top: 0; width: 244px; height: 460px; z-index: 2; } /*主選單(因為選單不需要模糊度所以單獨拿出來設定css樣式)*/ .menu-item{ height: 64px; line-height: 66px; cursor: pointer; padding: 0 24px; } /*主選單的每個標題,寬;行間距;因為是連結,浮在上面顯示小手標誌;內邊距,上下0,左右24px;下劃線兩邊留空*/ .menu-item a{ display: block; color: #fff; font-size: 16px; border-bottom: 1px solid rgba(255,.2); height: 63px; position: relative; } /*轉換為塊級元素;字型顏色;字型大小;下邊框,粗細,實線,顏色透明度;高;相對定位*/ .menu-item:last-child a{ border-bottom:none; } /*menu-item的最後一個元素a;沒有下邊框*/ .menu-item i{ position: absolute; right: 12px; top: 2px; color: rgba(255,.5); font-style: normal; font-weight: normal; font-family: "iconfont"; font-size: 24px; } /*子孫後代選擇器:相對a絕對定位;右下偏移;字型顏色模糊度;沒有斜體;沒有加粗;字型;字型大小*/ .sub-menu{ width: 730px; height: 458px; position: absolute; left: 244px; top: 0; background: #fff; z-index: 50; border: 1px solid #d9dde1; box-shadow: 0 4px 8px 0px rgba(0,.1); } /*子選單:寬;高;相對main絕對定位,左上偏移;背景顏色;層疊模式數字大的在上面顯示;邊框;盒子陰影*/ .inner-box{ width: 100%; height: 100%; background: url(../img/fe.png); display: none; } /*子選單背景:寬;高;背景圖片;全部隱藏*/ .sub-inner-box{ width: 652px; margin-left: 40px; overflow: hidden; } /*子選單內容;寬;外左邊距;溢位的內容隱藏*/ .title{ font-size: 16px; color: #f01414; line-height: 16px; font-weight: bold; margin: 28px 0 30px 0; } /*子選單內容的標題:字型大小;顏色;行高;粗體;外邊距*/ .sub-row{ margin-bottom: 25px; } /*子選單內容:外下邊距讓他們之間有距離*/ .bold{ font-weight: bold; } /*子標題:字型加粗*/ .ml10{ margin-left: 10px; } /*內容和斜槓之間的左邊距離*/ .mr10{ margin-right: 10px; } /*內容、子標題和斜槓之間的右邊距離*/ .hide{ display: none; } /*隱藏子選單*/
js
// 宣告全域性變數 window.onload=function(){ var index = 0,//當前顯示圖片的索引,預設值為0 timer = null,//定時器 cease = byId("cease"),//滑鼠懸停停止自動輪播的區域 prev = byId("prev"),//上一張 next = byId("next"),//下一張 banner = byId("banner"),//焦點圖的爺爺 pics = banner.getElementsByTagName('div'),//焦點圖 dots = byId("dots").getElementsByTagName('span'),//圓點 menuContent = byId("menu-content"),//主選單 menuItems = menuContent.getElementsByClassName("menu-item"),//主選單的標題 subMenu = byId("sub-menu"),//子選單 innerBox = subMenu.getElementsByClassName("inner-box"),//子選單的標題 mlen = menuItems.length,size = pics.length,llen = innerBox.length; // console.log(size); console.log(lis_1[0]); lis_1[0].onclick = function(){ department.className = 'hide' hospital.className = 'hospital' lis_1[0].className = 'li_1' } lis_1[1].onclick = function(){ department.className = '' hospital.className = 'hospital hide' lis_1[1].className = 'li_1' } //封裝getElementById()三元運算子 function byId(id){ return typeof(id) === "string" ? document.getElementById(id):id; } /*封裝通用事件繫結方法; element繫結事件的DOM元素 事件名 事件處理程式 */ function addHandler(element,type,handler){ //針對非IE瀏覽器 if (element,addEventListener) { element.addEventListener(type,handler,true); } //IE瀏覽器支援DOM2級 else if (element,attachEvent) { element.attachEvent('on' + type,handler); } //IE瀏覽器不支援DOM2級,使用DOM0級 else{ element['on' + type] = handler; //變數不可以.type,事件可以.; } } //封裝函式,切換圖片 function changImg(){ //遍歷所有圖片,將圖片隱藏,將圓點上的類清除 for(var i=0;i<size;i++){ pics[i].style.display = 'none'; dots[i].className = ""; } //顯示當前圖片 pics[index].style.display = 'block'; //當前圓點高亮顯示 dots[index].className = "active"; } // 點選下一張按鈕顯示下一張圖片 addHandler(next,"click",function(){ index++; if (index>=size) index = 0; changImg(); }); // 點選上一張按鈕顯示上一張圖片 addHandler(prev,function(){ index--; if (index<0) index = size-1; changImg(); }); //點選圓點索引切換圖片 for(var j=0;j<size;j++){ dots[j].setAttribute('tid',j); addHandler(dots[j],'click',function(){ //自定義屬性不可以直接點,需用getAttribute index = this.getAttribute('tid'); changImg(); }) } //定時器,開啟自動輪播 function startAutoPlay(){ timer = setInterval(function(){ index++; if (index>=size) index = 0; changImg(); },3000) } //清除定時器,停止自動輪播 function ceaseAutoPlay(){ if(timer){ clearInterval(timer); } } //封裝函式,取消所有主選單背景 function bgNone(){ for(var n=0;n<mlen;n++){ menuItems[n].style.background = 'none'; } } //封裝函式,子選單和主選單背景顯示 function menuItemsBg(){ //顯示子選單所在的背景 subMenu.className = "sub-menu"; //獲取當前主選單的索引 index = this.getAttribute('data-index'); //遍歷所有的子選單innerbox,將它們隱藏 for(var l=0;l<llen;l++){ //隱藏所有的子選單 innerBox[l].style.display = "none"; //所有主選單取消背景 menuItems[l].style.background = 'none'; } //找到當前子選單,讓其顯示出來 innerBox[index].style.display = "block"; //當前主選單顯示背景 menuItems[index].style.background = 'rgba(0,.1)'; } //滑鼠滑過主選單和子選單 for(var k=0;k<mlen;k++){ //給所有主選單定義屬性,表明它的索引 menuItems[k].setAttribute('data-index',k); //給所有子選單定義屬性,表明它的索引 innerBox[k].setAttribute('data-index',k); addHandler(menuItems[k],"mouseover",menuItemsBg) addHandler(innerBox[k],menuItemsBg) } //滑鼠滑入子選單,顯示子選單 addHandler(subMenu,function(){ subMenu.className = "sub-menu"; }) //滑鼠離開主選單,隱藏子選單 addHandler(menuContent,"mouseout",function(){ subMenu.className = "sub-menu hide"; bgNone(); }) //滑鼠離開子選單,隱藏子選單 addHandler(subMenu,function(){ subMenu.className = "sub-menu hide"; bgNone(); }) //滑鼠滑入cease,停止輪播 addHandler(cease,ceaseAutoPlay); //滑鼠離開cease,繼續輪播 addHandler(cease,startAutoPlay); //自動開啟輪播 startAutoPlay(); }
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。