? // 5、 幻燈片的切換
?? ??? ??? ??? ?function switchSlider(n){
?? ??? ??? ??? ??? ?// 5.1獲取要展現的幻燈片&按鈕元素 DOM
?? ??? ??? ??? ??? ?var main = g('main_' + n);
?? ??? ??? ??? ??? ?var ctrl = g('ctrl_' + n);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// 5.2獲取所有幻燈片及控制按鈕
?? ??? ??? ??? ??? ?var clear_main = g(".main-i");
?? ??? ??? ??? ??? ?var clear_ctrl = g(".ctrl-i");
?? ??? ??? ??? ??
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/* 為什么下面的for循環中不能使用for...in呢，我們知道for...in可以用來遍歷數組中的元素和
?? ??? ??? ??? ??? ?對象中的屬性，通過g()得到的函數不是嚴格意義上的數組，是對象。
?? ??? ??? ??? ??? ?alert(typeof clear_main);
?? ??? ??? ??? ??? ?alert(clear_main instanceof Array);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?使用for...in遍歷clear_main的過程中得到這些值：
?? ??? ??? ??? ??? ?0，1，2，3，4，5，6，item，namedItem，length。
?? ??? ??? ??? ??? ?我們只需要前面的數值。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?for(var i in clear_main){
?? ??? ??? ??? ??? ??? ?alert(i);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// 5.3清除active樣式
?? ??? ??? ??? ??? ?// 這里只能使用普通for循環，不能使用for...in，
?? ??? ??? ??? ??? ?for(i = 0; i < clear_ctrl.length; i ++){
?? ??? ??? ??? ??? ??? ?// 通過字符串替換函數把active樣式去掉即可。
?? ??? ??? ??? ??? ??? ?clear_main[i].className = clear_main[i].className.replace(' main-i_active','');
?? ??? ??? ??? ??? ??? ?clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active','');
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// 5.4為當前按鈕和幻燈片添加附加樣式。
?? ??? ??? ??? ??? ?// 只有添加了main-i_active樣式幻燈片才會顯示出來，否則在左邊隱藏。
?? ??? ??? ??? ??? ?// 只有添加了ctrl-i_active樣式控制按鈕才會顯示對應的效果，否則小圖片不顯示。
?? ??? ??? ??? ??? ?main.className += ' main-i_active';
?? ??? ??? ??? ??? ?ctrl.className += ' ctrl-i_active';
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?7.2、替換main_background的背景圖片，之前這張背景圖片一直是{{index}}.jpg
?? ??? ??? ??? ??? ??? ?這里動態的修改為當前切換的圖片。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?setTimeout(function(){
?? ??? ??? ??? ??? ??? ?g("main_background").innerHTML = main.innerHTML;
?? ??? ??? ??? ??? ?},500);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*
?? ??? ??? ??? ?6、動態調整圖片的margin-top以使其垂直居中(如果沒有設置垂直居中，
?? ??? ??? ??? ?圖片下面沒有顯示出來，overflow部分隱藏了，上面我們不想看到的區域顯示出來了)
?? ??? ??? ??? ?*/
?? ??? ??? ??? ?function movePicture(){
?? ??? ??? ??? ??? ?var pictures = g(".picture");
?? ??? ??? ??? ??? ?for(i = 0; i < pictures.length; i ++){
?? ??? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ??? ?實現圖片垂直居中的原理是：
?? ??? ??? ??? ??? ??? ?把圖片的中心放在距離頂部50%的位置，這樣才能實現垂直居中。
?? ??? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ??? ?pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2) + "px";
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?// 4、定義還是幻燈片輸出（必須頁面所有元素加載完成后開始）
?? ??? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ??? ?addSliders();
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?一定要有這個調用，否則頁面加載后沒有點擊控制按鈕的話，是沒有幻燈片的。
?? ??? ??? ??? ??? ?這里默認就顯示第一張圖片。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?switchSlider(4);
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?為什么要推遲100毫秒再執行呢？因為圖片按鈕都是動態生成的， 因此必須保證
?? ??? ??? ??? ??? ?所有的按鈕都生成完畢后再執行這個方法。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?setTimeout(function(){
?? ??? ??? ??? ??? ??? ?movePicture();
?? ??? ??? ??? ??? ?},100);
?? ??? ??? ??? ?}
?? ??? ??? ?</script>
?? ??? ?</div>
?? ?</body>
</html>