Javascript实现幻灯片效果

最新推荐文章于 2025-06-03 15:10:05 发布

illuSioN4ng

最新推荐文章于 2025-06-03 15:10:05 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/la413972057/article/details/47950909

本文介绍了如何使用JavaScript从头开始实现一个简单的幻灯片效果，重点考虑了用户体验，如考虑带宽、浏览器兼容性及图片加载速度，并讨论了导航控制，包括手动和自动播放选项，以及添加控制按钮如前进、后退。此外，还提到了添加超链接和图片随机显示的可能性。

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

Web上很多页面都有提供javascript幻灯效果的代码库，我们可以免费直接使用很多优秀的代码库。今天我开始学习用JavaScript实现幻灯效果，新手一步一步开始学起。

在创建一个幻灯效果的时候，页面的访客是我们需要首要考虑的因素。其中包括访问者的带宽、浏览器的类型、在下载大图片的时候是否需要漫长的下载时间。导航是第二个重要因素，访客是手动进行控制幻灯还是页面加载完成后自动播放，退出时自动停止播放还是自动循环固定次数后停止？我们可能还会想创建控制按钮，像开始、结束、暂停、前进、后退、加速播放、减速播放等。还会想在图片上创建超链接和可单击的图片，每帧图片都连接到不同的URL。甚至会想随机地显示图片或者按照某种顺序来显示。（摘自JavaScript详解）
下面就介绍一种我今天刚刚学习的最简单的带有按钮的幻灯展示。

<div style="text-align:center;">
	<br>
	<img src="./images/1.jpg" alt="" name="pic" height="192" width="108">
	<br>
	<input type="button" value="start Show" onClick="return startSlideShow();">
	<input type="button" value="stop Show" onClick="return stopSlideShow();">
</div>

上面代码为html主体，包括一个images和两个按钮，点击分别实现幻灯片开始和停止的功能。

		function preLoadImages(){
			if(document.images){
				pictures = new Array();
				pictures[0] = new Image();
				pictures[0] = "./images/1.jpg";
				pictures[1] = new Image();
				pictures[1] = "./images/2.jpg";
				pictures[2] = new Image();
				pictures[2] = "./images/3.jpg";
				pictures[3] = new Image();
				pictures[3] = "./images/6.jpg";
			}else{
				alert("There are no images to preload!");
			}
		}

上面是preLoadImages函数，在HTML文档head部分定义该函数来预加载图像列表。脚本运行之前，使用该函数在浏览器的缓存中存储一些必须的照片，这样做可以减少访客的等待时间。

var index = 0;
function startSlideShow(){
	if(index < pictures.length){
		document.images["pic"].src = pictures[index];
		index++;
	}else{
		index = 0;
		document.images["pic"].src = pictures[index];
		index++;
	}
	timeout = setTimeout(startSlideShow, 1500);
}

function stopSlideShow(){
	clearTimeout(timeout);
}

上面代码为startSlideShow和stopSlideShow函数，通过index索引值来遍历图片的地址，并用定时器设置1.5S显示一张图片。

该功能的实际效果见连接。点击打开链接