JQ 最少代码实现多图切换

 这个是偶实现的方法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>最简单的多图切换</title>
<link rel="stylesheet" href="base.css" />
<style>
.banner{ width: 200px; height: 120px; margin: 80px auto 0 auto;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<div class="banner">
	<img src="img/aaa.png" id="slide" width="200" height="120">
</div>
<script>
$(function() {
	simpleSlide();
});
function simpleSlide(){
	var index = 0;
	var arr = ['aaa.png', 'bbb.png', 'ccc.png'];
	setInterval(function(){
		index == (arr.length - 1) ? index = 0 : index ++;
		$("#slide")[0].src = 'img/' + arr[index];
	}, 4000);
}
</script>
</body>
</html>

结果群友(大树)实现了更简单的方法

function simpleSlide(){
	var index = 0;
	var arr = ['aaa.png', 'bbb.png', 'ccc.png'];
	setInterval(function(){
		index++;
		$("#slide")[0].src = 'img/' + arr[index%arr.length];
	}, 4000);
}

 效果图:
JQ 最少代码实现多图切换
 

相关推荐