【小案例】图片切换

最新推荐文章于 2022-04-19 18:40:51 发布

希冀miracle

最新推荐文章于 2022-04-19 18:40:51 发布

阅读量251

点赞数

分类专栏： web前端相关

本文链接：https://blog.csdn.net/weixin_39843945/article/details/89459648

版权

web前端相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.JS代码

<script type="text/javascript">
		window.onload=function(){
		//获取img标签
		var img=document.getElementsByTagName("img")[0];
		
		//创建一个数组,用来保存图片的路径
		var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
		
		//创建一个变量,来保存当前正在显示的图片的索引
		var index=0;
		
		
		//获取两个按钮
		var pre=document.getElementById("pre");
		var next=document.getElementById("next");
		
		pre.onclick=function(){
			index--;
			
			//判断index是否小于0
			if(index<0){
				index=imgArr.length-1;
			}
			
			img.src=imgArr[index];	
			//设置提示文字
			//获取id=info的p 元素
			var info =document.getElementById("info");
			
			info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
		};
		
		next.onclick=function(){
			/*  
				切换到下一张是index自增*/
			index++;
			
			if(index>imgArr.length-1){
				index=0;
			}
			
			//切换图片就是需改img的src属性
			//要修改一个元素的属性 元素.属性=属性值
			img.src=imgArr[index];
			//设置提示文字
			//获取id=info的p 元素
			var info =document.getElementById("info");
			
			info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
		};
	};
</script>

2.HTML代码

<body>
<div id="outer">
	<p id="info"></p>
	<img src="img/1.jpg"/>
	<button id="pre" >上一张</button>
	<button id="next" >下一张</button>
</div>
</body>

3.CSS代码

<style type="text/css">
	*{
		margin: 0;
		padding:0;
	}
	#outer{
		width: 410x;
		height:500px;
		margin: 0 auto;
		padding: 0px;
		background-color: greenyellow;
		text-align: center;
	 }
	 img{
	 	width: 400px;
	 	height: 500px;
	 }
</style>

学了setInterval（）之后

1.HTML

	<img id="img1"src="img/1.jpg" style="width: 270px;height: 360px;"/>
	<br/><br/>
	<button id="btn01">开始</button>
	<button id="btn02">暂停</button>

2.JS代码

window.onload=function(){
		/*  
			使图片可以自动切换
		*/
		//获取img标签
		var img=document.getElementById("img1");
		
		//创建一个数组
		var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
		
		//创建一个变量，用来保存当前图片的索引
		var index=0;
		
		//定义一个变量用来保存定时器的标识
		var timer;
		
		
		//为btn01绑定一个单击响应函数
		var btn01=document.getElementById("btn01");
		btn01.onclick=function(){
				/*  
					目前，我们每点击一次按钮，就会开启一个定时器，
						点击多次就会开启多个定时器，这就导致图片的企鹅换速度过快
						并且我们只能关闭最后一次开启的定时器
				*/
				//在开启定时器之前，需要将元素上的其他定时器关闭
				clearInterval(timer);
				/*  
					开启一个定时器，来自动切换图片
				*/
				timer=setInterval(function() {
				//使索引自增
				index++;
					
				//判断索引是否超过最大索引
				/* if(index>=imgArr.length){
					index=0;
				} */
					
				index=index%imgArr.length;
					
				//修改img1的src属性
				img.src=imgArr[index];
				}, 700);
			}
			var btn02=document.getElementById("btn02");
			//为btn02绑定一个单击响应函数
			btn02.onclick=function(){
				//点击按钮后，停止图片的自动切换，关闭定时器
				
				/*  
					clearInterval()可以接受任意参数
						如果参数是一个有效的定时器的标识，则停止对应的定时器
						如果参数不是一个有效的定时器，则什么也不做
				*/
;				clearInterval(timer);
			};
		
	};

希冀miracle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【小案例】图片切换

1.JS代码<script type="text/javascript"> window.function(){ //获取img标签 var img=document.getElementsByTagName("img")[0]; //创建一个数组,用来保存图片的路径 var imgArr=["img/1.jpg","img/2.jpg","img/3.jp...
复制链接

扫一扫

专栏目录