最简单的定时随机切换图片

最新推荐文章于 2020-11-18 21:47:12 发布

最骚的就是你

最新推荐文章于 2020-11-18 21:47:12 发布

阅读量2.2k

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/50299585

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

一共5张图，随机数算法[1,5]：

生成n-m，包含n和m的随机数：

第一步算出 m-n的值，假设等于w

第二步Math.random()*w

第三步Math.random()*w+n

第四步Math.round(Math.random()*w+n) 或者 Math.ceil(Math.random()*w+n)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定时随机切换图片 </title>
<style type="text/css">
</style>
</head>
<body>
<img src="images/banana1.jpg">
</body>
<script type="text/javascript">

var imgs = document.getElementsByTagName('img')
setInterval(
function() {
var rand = Math.ceil(Math.random() * 10);
imgs[0].src = "images/banana"+Math.round(Math.random()*4+1)+".jpg";
}, 2000);
</script>
</html>

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>定时随机切换图片 </title>
		<style type="text/css">
			#box {
				width: 720px;
				height: 480px;
				margin: 15px auto;
				border: 1px solid red;
				overflow: hidden;
			}
			.pic1 {
				display: block;
				float: left;
				width: 352px;
				height: 220px;
				margin: 4px;
			}
			.pic2 {
				display: block;
				float: left;
				width: 236px;
				height: 130px;
				margin: 1.5px;
			}
			.pic3 {
				display: block;
				float: left;
				width: 175px;
				height: 111px;
				margin: 2px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<img class="pic1" src="img/1.jpg">
			<img class="pic1" src="img/2.jpg">
			<img class="pic2" src="img/3.jpg">
			<img class="pic2" src="img/4.jpg">
			<img class="pic2" src="img/5.jpg">
			<img class="pic3" src="img/6.jpg">
			<img class="pic3" src="img/7.jpg">
			<img class="pic3" src="img/8.jpg">
			<img class="pic3" src="img/9.jpg">
		</div>
	</body>
	<script type="text/javascript">
		setInterval(
			function() {
				var imgs = document.getElementsByTagName('img');
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].src = "img/" + Math.round(Math.random() * 8 + 1) + ".jpg";
				}
			}, 2000);
	</script>

</html>