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

<!DOCTYPE html>
//还有许多地方有待改善
 <html>
	<head>
		<meta charset="UTF-8">
		<title>图片滚动播放效果</title>
		<script>
			function init(){
				//每1000毫秒自动下一张图片
				var i=window.setInterval("changeImg()",1000);
				//给按钮绑定一个点击事件
				document.getElementById("b3").onclick=function(){
					//点击按钮停止播放
					window.clearInterval(i);
				}
				//循环播放图片
				document.getElementById("t1").onclick=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 onload="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="上一张"  onclick="up()"/>
			<span id="jia">1</span><span>/</span><span id="jian">4</span>
			<input id="b2" type="button" value="下一张"  onclick="dow()"/>
			<!--//<input id="b3" type="button" value="停止播放" />-->
		</div>
		
	</body>
</html>
javascript实现一个简单的图片轮播和手动播放

猜你喜欢
