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

  <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

  • 28
    点赞
  • 141
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
以下是一个简单的原生JS实现图片滚动懒加载的demo源码HTML: ```html <div id="container"> <img src="placeholder.jpg" data-src="image1.jpg" alt=""> <img src="placeholder.jpg" data-src="image2.jpg" alt=""> <img src="placeholder.jpg" data-src="image3.jpg" alt=""> <img src="placeholder.jpg" data-src="image4.jpg" alt=""> <img src="placeholder.jpg" data-src="image5.jpg" alt=""> <img src="placeholder.jpg" data-src="image6.jpg" alt=""> <img src="placeholder.jpg" data-src="image7.jpg" alt=""> <img src="placeholder.jpg" data-src="image8.jpg" alt=""> <img src="placeholder.jpg" data-src="image9.jpg" alt=""> <img src="placeholder.jpg" data-src="image10.jpg" alt=""> </div> ``` CSS: ```css #container { width: 600px; height: 400px; overflow-y: auto; } img { width: 100%; margin-bottom: 10px; } ``` JS: ```javascript // 获取容器和所有图片 var container = document.getElementById('container'); var images = container.getElementsByTagName('img'); // 加载图片 function loadImg(img) { var imgSrc = img.getAttribute('data-src'); img.src = imgSrc; } // 判断图片是否在可视区域内 function isInViewport(img) { var rect = img.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 加载可视区域内的图片 function loadVisibleImages() { for (var i = 0; i < images.length; i++) { if (isInViewport(images[i])) { loadImg(images[i]); } } } // 初始化,加载可视区域内的图片 loadVisibleImages(); // 滚动时加载可视区域内的图片 container.addEventListener('scroll', function() { loadVisibleImages(); }); ``` 在上面的代码中,我们首先通过`document.getElementById`和`container.getElementsByTagName`获取到容器和所有的图片元素。然后,我们定义了两个函数:`loadImg`和`isInViewport`,分别用于加载图片和判断图片是否在可视区域内。`loadVisibleImages`函数用来加载可视区域内的图片,我们在初始化时先调用一次,然后在容器滚动时也会调用。最后,我们通过`container.addEventListener`给容器添加一个滚动事件监听器,以便在容器滚动时加载可视区域内的图片

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AIOT魔法师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值