纯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手写轮播图（代码逻辑清晰，通俗易懂）

您的项目需求