Html实现四张图片滚动的源码

最新推荐文章于 2025-06-18 11:03:02 发布

原创最新推荐文章于 2025-06-18 11:03:02 发布 · 4.9w 阅读

141 ·

CC 4.0 BY-SA版权

Html 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了一段用于网页上实现随机图片切换的JavaScript代码。通过预加载多个图片到数组中，利用Math.random()生成随机数，从而定时更换页面显示的图片。此技术常用于网站的轮播图或背景图片的随机展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <title>Document</title>
 </head>
 <body OnLoad="swapPic()">
  <script language="javascript" type="text/javascript">
    var ranl = 0;
    var useRand = 0;
    images = new Array;
	images[1] = new Image();
	images[1].src = "images/pic.jpg";
	images[2] = new Image();
	images[2].src = "images/pic1.jpg";
	images[3] = new Image();
	images[3].src = "images/pic3.jpg";
	images[4] = new Image();
	images[4].src = "images/pic4.jpg";
	function swapPic(){
	   var imgnum = images.length-1;
       do{
	    var randnum = Math.random();
		randl = Math.round((imgnum-1)*randnum)+1;
	   }while(randl==useRand);
        useRand = randl;
        document.randimg.src = images[useRand].src		
		setTimeout('swapPic()',2000);
	}
	
  </script>
  <img name ="randimg" src="images/pic.jpg">
 </body>
<ml>

使用时候直接替换掉图片地址就Ok