轮播图的案例：

最新推荐文章于 2022-10-18 15:28:27 发布

杰克L

最新推荐文章于 2022-10-18 15:28:27 发布

阅读量91

点赞数

分类专栏：杰克L

本文链接：https://blog.csdn.net/weixin_46503633/article/details/110069955

版权

js html css javascript vue

杰克L 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

轮播图案例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			var i = 1;
			var t;
			$(function() {
				toggerImg();
				/*$("span").click(function() {
				});*/
				$("span").mouseenter(function(){
					i = $(this).text();
					clearTimeout(t);//清楚定时器
					toggerImg();
				});
			});
			function toggerImg(){
				$("img").attr("src", "img/" + i + ".jpg");
					if(i >= 5) {
						i = 0;
					}
					i++;
					t = setTimeout("toggerImg()",2000);
				}
		</script>
		<style type="text/css">
			img {
				width: 650px;
				height: 400px;
				border: 1px solid black;
			}
		</style>
	</head>

	<body>
		<div>
			<img src="img/1.jpg" />
		</div>
		<!--<span>切换</span>-->
		<span>1</span>&nbsp;<span>2</span>&nbsp;<span>3</span>&nbsp;<span>4</span>&nbsp;<span>5</span>&nbsp;
	</body>

</html>