純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）

者：夢里夢中夢

轉發鏈接：https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q

說一下需要的知識 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>

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

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

家好，這篇文章是七小時帶你入門HTML+CSS網頁設計最后一篇文章，我將分享一個用純CSS3編寫的輪播特效，大家可以研究下代碼的結構和語法，謝謝觀看?。?！

效果圖：

純CSS3編寫的輪播特效

html代碼：

<div class="tpt-banner">
	<input name="ban" id="ban1" type="radio">
	<input name="ban" id="ban2" type="radio">
	<input name="ban" id="ban3" type="radio">
	<ul>
		<li class="num1" style="background: #009688;">輪播1</li>
		<li class="num2" style="background: #5FB878;">輪播2</li>
		<li class="num3" style="background: #1E9FFF;">輪播3</li>
	</ul>
	<div class="nev">
		<label class="num1" for="ban1"></label>
		<label class="num2" for="ban2"></label>
		<label class="num3" for="ban3"></label>
	</div>
	<div class="nxt">
		<label class="num1" for="ban1"></label>
		<label class="num2" for="ban2"></label>
		<label class="num3" for="ban3"></label>
	</div>
	<div class="nts">
		<label class="num1" for="ban1"></label>
		<label class="num2" for="ban2"></label>
		<label class="num3" for="ban3"></label>
	</div>
</div>

CSS代碼：

在線咨詢

上一篇：新能源風口下，油水經銷商會是最慘的？
下一篇：手把手教你前端的各種文件上傳攻略和大文件斷點續傳

您的項目需求

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

整合營銷服務商

純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）

您的項目需求

純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）