最简单的jQuery轮播图代码

jQuery轮播说明:

首先需要准备3张图(picture1.jpg、picture2.jpg、picture3.jpg),然后因为下面用的是 jQuery 资源地址,所以需要在联网情况下测试,也可以引用本地jQuery资源。

<!DOCTYPE html>
<html>
<head>
	<title>jQuery轮播</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>

<div style="width:100%;">
	<img src="pic1.jpg" width="100%" />
</div>

<script>
var i = 1;
$(function(){
	//定时器
	setInterval("lunBo()",5000);
});

//更换img src属性
function lunBo(){
	$("img").attr("src","picture"+i+".jpg");
	if(i < 3){
		i++;
	} else{
		i=1;
	}
}
</script>

</body>
</html>

 


296 Clicks !

发表评论

电子邮件地址不会被公开。