// 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>