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

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

小晓白的博客

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

阅读量505

点赞数

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

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

版权

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

11 篇文章 0 订阅

订阅专栏

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




	
   
   
	
   
   
	图片切换之客控制切换方式
	 rel="stylesheet" type="text/css" href="css/index_10.css">
	<script type="text/javascript" src="js/index_10.js"></script>


	图片切换
	
   
   
		
    
    
		
    
    
	
   
   
	
   
   
    
    图片只能到最后一张或第一张切换
   
   
	
   
   
		
    
    <
		
    
    >
		
    
    图片文字加载中......
		
    
    数量正在计算中......
		
    
    
	
   
   

h3{text-align: center;}
#top{width: 400px;height: 40px;margin: 10px auto;text-align: center;line-height: 40px;}
#tips{width: 400px;height: 40px;margin: 0 auto;text-align: center;line-height: 40px;}
#content{width: 400px;height: 400px;border: 10px solid #ccc;margin: 10px auto 0;position: relative;background: #f1f1f1;}
#content a{width: 40px;height: 40px;background: #000;/*border: 5px solid #fff;*/position: absolute;top: 175px;text-align: center;text-decoration: none;line-height: 36px;color: #fff;font-size: 30px;font-weight: bold;filter: alpha(opacity:20);opacity: 0.2;}
#content a:hover{filter: alpha(opacity:90);opacity: 0.9;}
#prev{left: 10px;}
#next{right: 10px;}
#text, #span1{position: absolute;left: 0;width: 400px;height: 30px;line-height: 30px;text-align: center;color: #fff;background: #000;filter: alpha(opacity:60);opacity: 0.6;}
#text{bottom: 0;margin: 0;}
#span1{top: 0;}
#img1{width: 400px;height: 400px;}window.onload = function(){
	//alert(1);
	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 oOrder = document.getElementById('order');
	var oLoop = document.getElementById('loop');
	var oTips = document.getElementById('tips');

	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();

	oOrder.onclick = function(){
		oTips.innerHTML = '图片只能到最后一张或第一张切换';
		oPrev.onclick = function(){
			num --;
			if (num == -1) {
				num = 0;
				alert('不能再向前了~已经是第一张~~');
			}
			fnTab();
		}
		oNext.onclick = function(){
			num ++;
			if (num == arrText.length) {
				num = arrText.length -1;
				alert('已经是最后一张了~~');
			}
			fnTab();
		}
	}
	oLoop.onclick = function(){
		oTips.innerHTML = '图片可从第一张跳转到最后一张循环切换';
		oPrev.onclick = function(){
			num --;
			if (num == -1) {
				num = arrText.length - 1;
			}
			fnTab();
		}
		oNext.onclick = function(){
			num ++;
			if (num == arrText.length) {
				num = 0;
			}
			fnTab();
		}
	}

};