js實現(xiàn)圖片輪播切換效果
最近在b站上學(xué)習(xí)的時候,學(xué)到了一個用原生js實現(xiàn)圖片輪播切換效果的實戰(zhàn),碼下來收藏
上圖是這個小實戰(zhàn)的效果圖,整個小實戰(zhàn)所實現(xiàn)的功能是圖片自動輪播切換、點擊上下鍵圖片切換上下圖片、點擊右下角圓點切換相應(yīng)圖片、點擊主菜單顯示相應(yīng)子菜單內(nèi)容。
html頁面布局
<body> <!--主區(qū)域,存放所有需要元素--> <div id="main" class="main"> <!-- 導(dǎo)航菜單 --> <div class="menu-box"></div> <!-- 子菜單 --> <div class="sub-menu hidden" id="sub-menu"></div> <!-- 主菜單 --> <div id="menu-content" class="menu-content"> <div class="menu-item"> <a href="#"> <span>item</span> <i></i> </a> </div> <div class="menu-item"> <a href="#"> <span>item</span> <i></i> </a> </div> <div class="menu-item"> <a href="#"> <span>item</span> <i></i> </a> </div> <div class="menu-item"> <a href="#"> <span>item</span> <i></i> </a> </div> </div> <!-- 圖片輪播 --> <div id="banner" class="banner"> <a href="#"> <!-- slide-active表示當前需要顯示圖片的狀態(tài) --> <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> <!-- 上一張、下一張按鈕 --> <!-- javascript:void(0)表示這個a標簽不做任何鏈接跳轉(zhuǎn) --> <a href="javascript:void(0)" class="button prev" id="prev"> <img src="images/r-btn.png" alt="上一張" class="img-prev"> </a> <a href="javascript:void(0)" class="button next" id="next"> <img src="images/r-btn.png" alt="下一張" class="img-next"> </a> <!-- 圓點導(dǎo)航 --> <div id="dots" class="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> </div> </body>
js綁定事件
//封裝一個代替getElementById()的方法 function byId(id){ ?? ?//對id的類型做判斷 ?? ?return typeof(id)==="string"?document.getElementById(id):id; } //封裝切換圖片的函數(shù)(圖片和圓點是配套的,圖片有多少張圓點就有多少個,圖片切換到第幾張,圓點就到第幾個) function changeImg(){ ?? ?//遍歷banner下所有的div,將其隱藏 ?? ?for(var i = 0;i<len;i++){ ?? ??? ?pics[i].style.display = "none"; ?? ??? ?dots[i].className=""; ?//將span上的“active”類隱藏,點擊圓點以后將其顯示 ?? ?} ?? ?pics[index].style.display = "block"; //根據(jù)index找到當前圖片,將其顯示出來 ?? ?dots[index].className = "active"; ? ?//根據(jù)index找到當前span,將其顯示出來 } function slideImg(){ ?? ?var main = byId("main"); ?? ?//鼠標滑到圖片上清除定時器,鼠標離開圖片繼續(xù) ?? ?main.onmouseover = function(){ ?? ??? ?//滑到圖片上清除定時器,圖片停止輪播 ?? ??? ?if(timer){ ?? ??? ??? ?clearInterval(timer);? ?? ??? ?} ?? ?} ?? ?//調(diào)用onmouseout事件 ?? ?main.onmouseout = function(){ ?? ??? ?//鼠標離開定時器繼續(xù),每隔三秒切換一次圖片 ?? ??? ?timer = setInterval(function(){ ?? ??? ??? ?index++; //len=3 所以index的值只能是0,1,2 ?? ??? ??? ?if(index>=len){ ?? ??? ??? ??? ?index=0; ?? ??? ??? ?} ?? ??? ??? ?//切換圖片 ?? ??? ??? ?changeImg(); ?? ??? ?},2000); ?? ?} ?? ?//自動在main上觸發(fā)鼠標離開的事件,讓圖片自動切換,即在鼠標還沒有滑過圖片時,圖片就睡自動切換 ?? ?main.onmouseout(); //調(diào)用onmouseout方法 }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)HTML導(dǎo)航欄下拉菜單
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)HTML導(dǎo)航欄下拉菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11基于ajax與msmq技術(shù)的消息推送功能實現(xiàn)代碼
這篇文章主要介紹了基于ajax與msmq技術(shù)的消息推送功能實現(xiàn)代碼,具有一定的參考價值,有興趣的可以了解一下。2016-12-12表現(xiàn)、結(jié)構(gòu)、行為分離的選項卡效果
2008-01-01JavaScript數(shù)組方法-系統(tǒng)性總結(jié)詳解
本文是小編給大家特意整理的關(guān)于js數(shù)組方法的知識,非常實用,在面試筆試題中經(jīng)常用得到,有需要的朋友可以參考下2021-09-09