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

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

這篇文章主要為大家詳細介紹了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>&#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表示當前需要顯示圖片的狀態(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: