js原生学习-初级-练习05

最新推荐文章于 2022-10-17 23:30:55 发布

小晓白的博客

最新推荐文章于 2022-10-17 23:30:55 发布

阅读量439

点赞数 1

分类专栏： javascript原生学习文章标签： javascript js JS原生开发学习 csdn 前端

本文链接：https://blog.csdn.net/wbbott/article/details/72593656

版权

javascript原生学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js原生学习-初级-练习05




	
   
   
	综合小实例
	



   
   
	
    
    <
	
    
    >
	
    
    图片文字加载中......
	
    
    数量正在计算中......
	
    
    

   
   
<script type="text/javascript">
window.onload = function(){
	var oPrev = document.getElementById('prev');
	var oNext = document.getElementById('next');
	var oText = document.getElementById('text');
	var oSpan = document.getElementById('span1');
	var oImg = document.getElementById('img1');

	var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
	var arrText = ['游戏MM','人造运动员','性感美女','古装游戏美女'];

	var num = 0;
	//初始化
	function fnTab(){
		oSpan.innerHTML = num + 1 + '/' + arrText.length;
		oImg.src = arrUrl[num];
		oText.innerHTML = arrText[num]; 
	}
	fnTab();
	oPrev.onclick = function(){
		num --;
		if (num == -1) {
			num = arrText.length - 1;
		}
		fnTab();
	}
	oNext.onclick = function(){
		num ++;
		if (num == arrText.length) {
			num = 0;
		}
		fnTab();
	}
};
</script>