JS属性操作，注意事项以及轮播图实例

今天学习了JS当中的最为基本的属性操作。

1、属性操作有读和写：读操作———获取找到（元素.属性名）、写操作———添加修改替换（元素.属性名=新的值）

如读：alert（oBtn.value）；写：oBtn.value=oBtn.value；（把右边的值赋给左边）

2、

<p id="p1">这是一些文字</p>

替换便签内部的内容需要用到innerHTML：

document.getElementById('p1').innerHTML = 123； //“这是一些文字”变成了“123”

3、当要利用属性值替换样式时，如字体大小：元素.style.fontSize 、 padding左的值：元素.style.paddingLeft

//JS中不能识别横线，需要去掉，并且把横线后的第一个首字母大写。

4、通过class的样式来切换时，需要写成元素.className = “class的值”；

5、不能作为if判断条件有所有的相对路径的地址和颜色值。

小例子：利用创建开关来实现两张图片之间的切换，if判断中不能写图片的路径。

6、关于表单元素属性值的修改问题：

元素.style.styleFloat = 'right'; // IE

元素.style.cssFloat = 'left'; // 非IE

7、a = a + b 可以写成 a+= b

8、数组：类似于放一堆数据的仓库，第一个数据是‘arr[0]’，最后一个数据是‘arr[arr.length-1]’

往数组的最后一位添加数据：arr.push('')；

9、最后练习做了一个简单的轮播图实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	.box{
		text-align: center;
		position: relative;
	}
	#img1{
		width: 60%;
		height: 500px;
	}
	a{
		position: absolute;
		top: 250px;
		font-size: 50px;
		text-decoration: none;	
		width: 50px;
		height: 70px;
		line-height: 70px;
	}
	#prev{
		left: 12%;
	}
	#next{
		right: 12%;	
	}
	a:hover{
		background: gray;
	}
</style>
<body>
	<div class="box">
		<input id="btn1" type="button" value="单向滚动" />
		<input id="btn2" type="button" value="循环滚动" />
		<h3 id="text1">1/4</h3>
		<img id="img1" src="image/1.jpg"/>
		<a id="prev" href="#"><</a>
		<a id="next" href="#">></a>
		<h3 id="text2">这是第一张图片</h3>
	</div>
<script type="text/javascript">
	var oText1 = document.getElementById('text1');
	var oText2 = document.getElementById('text2');
	var oImg1 = document.getElementById('img1');
	var oPrev = document.getElementById('prev');
	var oNext = document.getElementById('next');
	var oBtn1 = document.getElementById('btn1');
	var oBtn2 = document.getElementById('btn2');


	var arrImg = ['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];
	var arrTex2 = ['这是第一张图片','这是第二张图片','这是第三张图片','这是第四张图片'];
	var arrTex1 = ['1/4','2/4','3/4','4/4'];
	var num = 0;

	function rep1(){
		oImg1.src = arrImg[num];
		oText1.innerHTML = arrTex1[num];
		oText2.innerHTML = arrTex2[num];
	}
	
	oBtn1.onclick = function (){
		oPrev.onclick = function (){
			if ( num > 0 ) {
				num--;
				rep1();
		}
			else{
				alert("不能再往左啦~~");
			}
		}
		oNext.onclick = function (){
			if ( num < 3 ) {
				num++;
				rep1();
		}
			else{
				alert("后面没有啦，亲~");
			}
		}
	}

	oBtn2.onclick = function (){
		oPrev.onclick = function (){
			if ( num > 0 ) {
				num--;
				rep1();
		}
			else{
				num = 3;
				rep1();
			}
		}
		oNext.onclick = function (){
			if ( num < 3 ) {
				num++;
				rep1();
		}
			else{
				num = 0;
				rep1();
			}
		}
	}
</script>
</body>
</html>

这段代码主要实现的功能是：在点击了单向滚动之后，在进行图片切换时不能够循环切换，切换到第一张再往左切换会弹出提示，同样，切换到最后一张再向右边切换也会再弹出提示；当点击了循环滚动之后，能够一直循环地切换并不弹出提示。

思路主要是：对最上面两个滚动按钮分开设置，在每一个里面再分别设置上一张和下一张按钮的功能，从而达到通过点击按钮，进入到不同的逻辑结构当中去。

JS属性操作，注意事项以及轮播图实例

猜你喜欢