js實(shí)現(xiàn)圖片輪播切換效果

更新時(shí)間：2022年07月13日 14:28:09 作者：wy__kobe

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片輪播切換效果，圖片自動輪播切換、點(diǎn)擊上下鍵圖片切換上下圖片等，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在b站上學(xué)習(xí)的時(shí)候，學(xué)到了一個(gè)用原生js實(shí)現(xiàn)圖片輪播切換效果的實(shí)戰(zhàn)，碼下來收藏

上圖是這個(gè)小實(shí)戰(zhàn)的效果圖，整個(gè)小實(shí)戰(zhàn)所實(shí)現(xiàn)的功能是圖片自動輪播切換、點(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>&#xe666;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i>&#xe666;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i>&#xe666;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i>&#xe666;</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);
?? ?}
?? ?//自動在main上觸發(fā)鼠標(biāo)離開的事件，讓圖片自動切換，即在鼠標(biāo)還沒有滑過圖片時(shí)，圖片就睡自動切換
?? ?main.onmouseout(); //調(diào)用onmouseout方法

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: