实操自动切换图片

最新推荐文章于 2022-06-18 23:44:58 发布

阳光的羊羊羊羊

最新推荐文章于 2022-06-18 23:44:58 发布

阅读量181

点赞数 1

本文链接：https://blog.csdn.net/yjyxw/article/details/106162561

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" href="layui\css\layui.css">
		<style type="text/css">
			.c{
				height: 100px;
				width: 100px;
			}
			
			.bi{
				background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589629241091&di=6da3e788be2130266ed08e067f2bf95a&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F82%2F87%2F415c4935a9a8df7.jpg);
				background-size: cover;
			}
			.mm{
			   height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body class="bi">
		<div class="c">
			<img src="" class="mm">
		</div>
		
		<script type="text/javascript">
			$(function(){
				var arr = new Array();
				arr[0]="ff.jpg";
				arr[1]="ff2.jpg";
				arr[2]="ff3.jpg";
				var length = 0;
				var $img = $('.mm');//接受一个jq对象
				var domimg = $img[0];//jq转成dom对象
				setInterval(function(){//每2000毫秒实行一次
						if(length==arr.length-1){//利用长度遍历图片
							length=0;
						}else{
							length++;
						}
                                    //对象的src赋值
					domimg.src=arr[length];

					console.log(arr[length]);
				},2000)
				
			});
					
				
			
		</script>
		
	</body>
</html>