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

蔚落 2022-05-26 04:18 175阅读 0赞

<!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".src获取图片路径，鼠标点一下换一张
    			 */
    			//1、newg一个数组将所有照片放进去，
    			var arr =["1.jpg","2.jpg","3.jpg","4.jpg"];
    			var index=0;
    			//2、定义onclick事件，点击时变量index加1，并判断，当变量等于数组长度时，赋值让其变为0 循环.
    			function dow(){
    				
    				index++;
    				if(index==arr.length){
    					index=0;
    				}
    				//3、获取img的标签id="img1".src获取图片路径，鼠标点一下换一张
    				document.getElementById("img1").src=arr[index];
    				//图片的页码控制
    				var j = document.getElementById("jia");
    				if((parseInt(j.innerHTML)+1) == arr.length+1){
    					j.innerHTML =0
    				}
    					j.innerHTML=parseInt(j.innerHTML)+1;
    			
    			}
    			/*
    			 * 图片跳转到上一张实现思路
    			 * 1、定义onclick()事件，up()函数。
    			 * 2、判断变量是否小于0，小于0将数组长度赋值给变量index,达到循环效果。
    			 * 3、获取img的标签id="img1".src获取图片路径，鼠标点一下换一张
    			 */
    			//1、定义onclick()事件，up()函数。
    			function up(){
    				index--;
    				//2、判断变量是否小于0，小于0将数组长度赋值给变量index,达到循环效果。
    				if(index<0){
    					index=arr.length;
    				}
    				//3、获取img的标签id="img1".src获取图片路径，鼠标点一下换一张
    				document.getElementById("img1").src=arr[index];
    				//图片页码控制
    				var i = document.getElementById("jia")
    				if((parseInt(i.innerHTML)-1)==0){
    					i.innerHTML=4;
    				}else{
    					i.innerHTML=parseInt(i.innerHTML)-1;
    				}
    			}
    			
    		</script>
    		<style>
    		#bnt{
    			margin-top:30px ;
    		}
    		#b1,#t1{
    			margin-right: 30px;
    		}
    		#b2,#t2,#b3{
    			margin-left: 30px;
    		}
    		#bnt1{
    			margin-top: 30px;
    			margin-bottom: 30px;
    		}
    		#img1{
    			border-radius: 30px;
    		}
    		</style>
    	</head>
    	<body οnlοad="init()">
    		
    		<div id="bnt1" align="center">
    			<input id="t1" type="button" value="循环播放" />
    			<input id="b3" type="button"  value="手动播放" />
    		</div>
    		<div align="center">
    			<img src="1.jpg" width="500px" height="400px" id="img1"/>
    		</div>
    		<div align="center" id="bnt">
    			<input id="b1" type="button" value="上一张"  οnclick="up()"/>
    			<span id="jia">1</span><span>/</span><span id="jian">4</span>
    			<input id="b2" type="button" value="下一张"  οnclick="dow()"/>
    			
    		</div>
    		
    	</body>
    </html>