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>这段代码主要实现的功能是：在点击了单向滚动之后，在进行图片切换时不能够循环切换，切换到第一张再往左切换会弹出提示，同样，切换到最后一张再向右边切换也会再弹出提示；当点击了循环滚动之后，能够一直循环地切换并不弹出提示。
思路主要是：对最上面两个滚动按钮分开设置，在每一个里面再分别设置上一张和下一张按钮的功能，从而达到通过点击按钮，进入到不同的逻辑结构当中去。
推荐阅读