【小案例】图片切换

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);
			};
		
	};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值