首先我們先要導入幾張圖片（我已導入完畢）：
；

好，我們先寫一個

<div ></div>,

定義一個

class="contair", 

在這<div>中再定義一個<div></div>,定義一個id="hhs"(隨便定義的),然後在下面定義五個圖片

1 <img src="n1.jpg"> 
2 <img src="n2.jpg">``<img src="n3.jpg"> 
3 <img src="n4.jpg">``<img src="n5.jpg">; 

我們再在樣式表中寫上一些需要用的，如下代碼：

 1 <style type="text/css"> 
 2  .contair *{ 
 3  display: block; //變為塊級元素 
 4 padding: 3px 0px; 
 5  } 
 6  .contair{ 
 7  margin: 0px auto; 
 8  width: 300px; 
 9  } 
10  .sf{ 
11  transition:all 0.5s; //動畫 
12 }； 

我們寫一個 1 function $(oId){ 2 return document.getElementById(oId);//這個就是個方法, 方法名字叫$ 參數為oId. 這個是元素oId.傳入這個oId, 會幫我們拿到html代碼元素裏相應的id的對象

再寫一個

window.onload=function(){//onload 事件會在頁面或圖像加載完成後立即發生。
 repeatElement($("hhs"))//後面會提到

 1 現在我們再寫後面主體部分，先定義一個
 2 2.    `function repeatElement(exel //定義一個參數){
 3 3.            var obj = nextSibling(exel,"img");//nextSibling兄弟元素
 4 4.            while(exel!=null){  //循環
 5 5.            addClass(obj,"sf");  //
 
後面會提到，addClass為添加節點
 6 6.            obj.onmouseover = function(){   //光標移到圖片上
 7 7.                this.style.padding = "10px 0px" //this表示上一層的obj部分
 8 8.            }
 9 9.            obj.onmouseout = function(){    //光標移除圖片
10 10.                this.style.padding = "10px 0px"
11 11.            }
12 12.            obj.nextSibling(obj,"img"); //循環下一次圖片
13 13.            }
14 14.    }`;
15 15.    現在寫添加節點addClass:
16 16.    `function addClass(obj,cn){
17 17.    var lName=obj.className;//className屬性設置或返回元素的 class 屬性
18 18.    if(lName.length ==0){  //判斷為0
19 19.        obj.className = cn;  
20 20.    }else{
21 21.        obj.className = (" "+cn);
22 22.    }
23 23.    }`;
24 24.    現在寫兄弟節點nextSibling：
25 25.    `function nextSibling(obj,sname){
26 26.        var exe=lobj.nextSibling ;//先獲取它
27 27.        for(; exel!=null;exel = exel.nextSibling){
28 28.            var cname = exel.nodeName.toLocaleLowerCase();//轉換為小寫
29 29.            if(cname == sname){
30 30.                return exel;
31 31.            }
32 32.        }
33 33.        return null;        
34 34.    }`

我們可以對nextSibling和addClass進行封裝，以便以後使用，封裝有三種方式

第一種dom.：

 1 `var dom = new Object(); 
 2  function $(oId){ 
 3  return document.getElementById(oId); 
 4  }
 5 
 6 dom.addClass = function(obj, cn){ 
 7  var lName = obj.className; 
 8  if(lName.length==0){ 
 9  obj.className = cn; 
10  }else{ 
11  obj.className =(” “+cn); 
12  } 
13  }
14 
15 dom.nextSibling = function(obj,sname){ 
16  var exel = obj.nextSibling; 
17  for(;exel!=null;exel = exel.nextSibling){ 
18  var cName = exel.nodeName.toLocaleLowerCase(); 
19  if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
20  return exel; 
21  } 
22  } 
23  return null; 
24  }`

第二種dom[" "]= ：

 1 `var dom = new Object(); 
 2  function $(oId){ 
 3  return document.getElementById(oId); 
 4  } 
 5  dom[“addClass”] = function(obj, cn){ 
 6  var lName = obj.className; 
 7  if(lName.length==0){ 
 8  obj.className = cn; 
 9  }else{ 
10  obj.className =(” “+cn); 
11  } 
12  }
13 
14 dom[“nextSibling”] = function(obj,sname){ 
15  var exel = obj.nextSibling; 
16  for(;exel!=null;exel = exel.nextSibling){ 
17  var cName = exel.nodeName.toLocaleLowerCase(); 
18  if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
19  return exel; 
20  } 
21  } 
22  return null; 
23  } 

第三種var dom = {...}：

 1 function $(oId){ 
 2  return document.getElementById(oId); 
 3  } 
 4  var dom = { 
 5  addClass: function(obj, cn){ 
 6  var lName = obj.className; 
 7  if(lName.length==0){ 
 8  obj.className = cn; 
 9  }else{ 
10  obj.className =(” “+cn); 
11  } 
12  }, 
13  nextSibling: function(obj,sname){ 
14  var exel = obj.nextSibling; 
15  for(;exel!=null;exel = exel.nextSibling){ 
16  var cName = exel.nodeName.toLocaleLowerCase(); 
17  if( exel.nodeType==Node.ELEMENT_NODE&&sname==cName){ 
18  return exel; 
19  } 
20  } 
21  return null; 
22  }, 
23  `

效果演示：

http://localhost:63342/demo/js/ttt1.html

用js把圖片做的富有動態感，並對以後需要用著的屬性進行封裝