JQ 最少代码实现多图切换

最新推荐文章于 2021-09-14 17:12:59 发布

最新推荐文章于 2021-09-14 17:12:59 发布 · 149 阅读

文章标签：

#JQ 最简单的多图切换 #JQ 多图切换 #多图切换

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的简单图片轮播方法。通过设置定时器和图片数组，可以轻松实现图片的自动切换效果。提供了两种不同实现方式，一种采用if条件判断，另一种则利用取余操作简化代码。

这个是偶实现的方法

<!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);
}

效果图：