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