月底了，轉瞬第四周的學習也開始了，剩下的十三週裏，只求盡力做到好。今天學習了輪播的製作，也是另一門語言的接觸，雖然都是一些代碼的編寫，可是爲什麼總感覺這會動的輪播感覺很是高大上，哈哈哈。還是來回憶一下今天的內容吧。
首先，做輪播圖關鍵是先要吧輪播的佈局做好，在body中創建div，以一大包含三小形式並將大div居中在頁面：
<!-- 佈局 -->
<div id="container">
<div id="left" class="roll" onclick="changes()"></div>
<div id="center" class="roll" </div>
<div id="right" class="roll" onclick="change()"></div>
</div>
創建好佈局之後我們便開始創建輪播了：
我們在使用scrip標籤，然後第一步要通過getElementById找到要設置的對象，然後我們可以得到imgDiv樣式的background屬性，並賦予它變量，在通過改變圖片鏈接的number實現地址的切換，方法如下：
<script>
var imgDiv = document.getElementById("center")
var imgBg = imgDiv.style;
var number = 1;
function change(){
if(number > 5){
number = 1 ;
}
imgBg.background = 'url(./image/'+number+'.jpg)no-repeat';
number ++ ;
}
function changes(){
var numbers = 5 ;
if(numbers < 1){
numbers = 5 ;
}
imgBg.background = 'url(./image/'+number+'.jpg)no-repeat';
number -- ;
}
設置鼠標放在圖片上便停止播放，離開便運行，需要設置onmouseover和onmouseout事件，時期打開關閉計時器setInterval便可達到想要的效果，兩邊的div也可以設置onclick事件來達到切換輪播的效果。
var clearTime = setInterval(change,2000);
function clearT(){
clearInterval(clearTime)
}
function openT(){
clearTime = setInterval(change,2000);
}
</script>
當然這種方法侷限於圖片的鏈接需要統一，但是能夠實現效果的方法還是可採用的。
另一種方法是將圖片鏈接構成一個數組，通過shift、push，pop、unshift實現對數組順序的改變，只索取數組中第一的下標爲0的元素作爲圖片地址，便可達到對圖片的輪播。
首先還是要先做好佈局：
<div id="main">
<div id="left" class="button" ">
</div>
<div id="img">
</div>
<div id="right" class="button" ">
</div>
</div>
接下來在script中創建數組，設置數組中元素的變化：
<script>
var imgBg = document.getElementById("img");
var a = ["url(./image/1.jpg)","url(./image/2.jpg)","url(./image/3.jpg)","url(./image/4.jpg)",
"url(./image/5.jpg)"]
function toLeft(){
var b = a.shift();
a.push(b);
imgBg.style.background =a[0];
}
setInterval(toLeft,2000);
function toRight(){
var b = a.pop();
a.unshift(b);
imgBg.style.background =a[0];
}
</script>
通過對數組中元素的循環切換便達到輪播效果。
最後介紹了bootstrap，以我的理解，這是一種快速創建編碼的框架，相當於一種通用的骨架，通過快速的將骨架植入，根據需要進行微調，然後在添加內容豐富骨架，以此實現更高效的工作，熟練掌握bootstrap是很有必要的，今天只是初步的認識，感觸不是很深刻，期待更多接觸後帶來驚喜。