10-12无缝滚动、DOM、

一、无缝滚动js

<script>
window.onload=function(){
var box = document.getElementById("box");
var uls = box.getElementsByTagName("ul")[0];
var lis = uls.getElementsByTagName("li");
var imgs = uls.getElementsByTagName("img");
var speed = 1;//设置移动的速度
uls.innerHTML +=uls.innerHTML; //动态设置装载图片的容器的内容保持有两组相同的内容
uls.style.width=lis[0].offsetWidth*lis.length+'px';//动态设置容器的宽度
var btnLeft = document.getElementById("left");//控制方向向左的按钮
var btnRight = document.getElementById("right");//控制方向向右的按钮
function scrollImg(){//让图片滚动起来
if(uls.offsetLeft<-uls.offsetWidth/2){//向左滚动：判断如果左面的距离超过一半，就把装载图片的容器回到原点
uls.style.left='0px';
}
if(uls.offsetLeft>0){//向右滚动：判断如果装载图片的容器大于起点（即左边没图），则让容器的左边移动到左边宽度一半的位置
uls.style.left=(-uls.offsetWidth/2)+'px';
}
uls.style.left=uls.offsetLeft+speed+'px';//移动容器
}
var timer =setInterval(scrollImg,3);//使用定时器让函数调用，实现滚动
uls.onmouseenter=function(){//鼠标移入时使图片停止滚动
clearInterval(timer);//使用清空定时器方法来实现停止滚动
this.onmouseleave=function(){//鼠标移开让定时器继续，实现滚动
timer =setInterval(scrollImg,3);
}
}
btnLeft.onclick = function(){
speed=-1; //控制滚动的方向向左
}
btnRight.onclick=function(){
speed=1; //控制滚动的方向向右
}
}
</script>

二、DOM节点的操作：

function childrenNodeStyle(obj,property,val){//用DOM节点给第一个子节点设置样式
if(obj.firstElementChild){//非IE浏览器
obj.firstElementChild.style[property]=val;
}else{//IE浏览器
obj.firstChild.style[property]=val;
}
}
function getClassArr(oArr,cName){//获取一组数组内具有相同类名的对象 返回这组对象的数组集合
var arr=[];
for(var i =0;i<oArr.length;i++){
if(oArr[i].className==cName){
arr.push(oArr[i]);
}
}
return arr;
}

插入节点：

box.appendChild(oLi);//在对象后插入子节点
box.insertBefore(oLi,box.children[0]);//在旧结点前插入新节点

father.remove(child);//根据父节点删除子节点

object对象的操作：

arr.join('');//拼接数组之间的元素转为字符串类型

var obj = {a:[5,6,7],b:[6,99],c:9};//用object对象可以存储数组，但是数组不可以存储obj对象

var arr=["border","bottom","color"];
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
}

arr.join('');

//使用数组方法将字符串转为驼峰命名法