JavaScript實現HTML輪播，簡單有效

說一下需要的知識 setinterval函數，明白document. getelementsById是什么意思。

輪播呈現方式多種多樣，鄙人在這里給出一個比較low的方法，若有大神指教，不甚感激！

思路：

1、在body里面設置一個img標簽，src路徑暫且不設置，并給img標簽設置id。

2、寫一個function函數，里面設置src隨著某種變量而改變的條件。

下面擼代碼！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img id="image"/>
<script >
function $(id){
return document.getElementById(id);
}
var index=1;
function setSrc(){
$("image").src="./img/"+index+".png";
++index;
if(index==3){
index=1;
}
}
setSrc();
setInterval("setSrc()",500);
</script>
</body>
</html>

在這里我采用了投機取巧的方式，我的圖片名都是：

讀者可以按照需要改變一下函數的結構

關注，不迷路，每日分享大量前端知識。

代碼運行結果圖

因為平時用vue，寫代碼習慣了，這個輪播圖的代碼是在vue的腳手架里寫的，把它拆解起來，寫在html原理一樣，如果覺得拆解吃力的話，可以參考我的上篇文章vue腳手架的使用，將這個代碼粘貼到helloworld.vue代碼運行就可以了，基本功能實現了，替換成自己的圖片就可以運行了。唯一美中不足的就是輪播圖一開始不是自動播放的，需要鼠標在圖片上劃過一次才能自動播放，如果用原生js代碼寫的話，用windoes.onload和init，建立定時器，然后清除等操作可以實現自動播放，和鼠標放在上面后停止播放功能，遇到的問題就是，vue加載頁面自動開始觸發的定時器寫在mounted中，但是將定時器銷毀，只能寫在鉤子函數befdestroy和destroy中才能銷毀（我感覺是）中間需要鼠標放在圖片上停止定時器實現不了，對vue的生命周期函數理解的還是不夠，如果有更好的實現方式還請評論區留言交流以后還得多多練習。

體代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;
			padding: 0;}
#box {
	width: 100%;
	height: 502px;
	overflow: hidden;/*溢出的部分:隱藏*/
}

#box .menu {
	width: 607%;
	position: relative;
	margin-left: -40px;/*左外邊距*/
	bottom: 0px;/*低邊距離*/

}

#box .menu ul li {
	float: left;/*浮動:左,就是要把圖片往左浮動*/
	list-style: none;
}




		</style>
	</head>
	<body>
		<div id="box"><!--最外的大盒子-->
			<div class="menu"><!--這里是寫入我們要播放的圖片-->
				<ul><!--無序列表-->
					<li><img src="image/01.jpg" width="1546px;" height="500px"></li>
					<li><img src="image/02.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/03.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/04.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/05.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/06.jpg" width="1546px;" height="500px"></li>
				</ul>
			</div>
			
		</div>
		<!--在這里導入javascript文件也就是js代碼，如果沒有這個就沒有動畫-->
		<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
		<!--寫代碼-->
        <script>
//      	function就是函數執行
        	$(function(){
        		//一般獲取元素用var,從第一張圖片開始
        		var _index=0,  
//        		 窗口寬度,就是把所有圖片放在水平線上的總寬度
        		window_width=1546, 
        		//時間循環
        		timer=null,  
        		//圖片內容一共六張
        		images_count=6;
        		//獲取下一個
        		function nextPlay(){
        			if(_index>images_count-1){//_index指的是每一張圖片
        				_index=0;//從第一張開始
        				              //stop() 停留，animate自定義動畫往左運動，
        				$("#box .menu").stop().animate({left:-window_width*_index},500);
        			}else{
        				$("#box .menu").stop().animate({left:-window_width*_index},500);
        			} 
        			//每一個圖片加一就是自動按順序出來
        			_index++;
        		}
        		timer=setInterval(nextPlay,2000);
        	})
        </script>
	</body>
</html>

javascript文件也就是js文件：鏈接：https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g

提取碼：mnfg

在線咨詢

上一篇：全宇宙最全景深合成攻略
下一篇：JavaScript函數進階：函數的定義和調用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript實現HTML輪播，簡單有效

您的項目需求