javascript实现一个简单的图片轮播和手动播放

最新推荐文章于 2024-09-19 15:58:23 发布

lzpwzy

最新推荐文章于 2024-09-19 15:58:23 发布

阅读量4.1k

点赞数 2

本文链接：https://blog.youkuaiyun.com/lzpzwy/article/details/80072750

版权

这是一个使用JavaScript实现的简单图片轮播效果，具备自动播放和手动播放功能。通过设置定时器每1000毫秒切换下一张图片，同时提供按钮控制播放和停止。用户还可以点击按钮实现图片的上一张和下一张切换，页面中还包含图片当前页码的显示。

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

<!DOCTYPE html>
//还有许多地方有待改善
 <html>
	<head>
		<meta charset="UTF-8">
		<title>图片滚动播放效果</title>
		<script>
			function init(){
				//每1000毫秒自动下一张图片
				var i=window.setInterval("changeImg()",1000);
				//给按钮绑定一个点击事件
				document.getElementById("b3").οnclick=function(){
					//点击按钮停止播放
					window.clearInterval(i);
				}
				//循环播放图片
				document.getElementById("t1").οnclick=function(){
					window.setInterval("changeImg()",1000);
				}
				
			}
			var i=0//定义变量，初始化值为0
			function changeImg(){//自定义函数
				i++;
				//利用字符串拼接图片地址
				document.getElementById("img1").src=i+".jpg";
				//当i等于3时，将其赋值为0，循环播放
				if(i==4){
					i=0;
				}
			}
			/*图片跳转下一张完成思路
			 * 1、newg一个数组将所有照片放进去，
			 * 2、定义onclick事件，点击时变量index加1，当变量等于数组长度时，赋值让其变为0.
			 * 3、获取img的标签id="img1&