js圖片輪播圖

/*焦點圖*/
        var Box='.carousel';//盒子
        var Menu=$(Box+' .l_cursor li');//圓點菜單
        var Con=$(Box+' .carouselChange li');//大圖
        var Text=$(Box+' .text li');//圖註文字
        var Prev=$(Box+' .Prev');//上一頁
        var Next=$(Box+' .next');//下一頁
        var Counts=$(Con).size();//獲取li總數
        var nowIndex=0;
        var timer;
        /* 點擊切換 */
        $(Menu).click(function(){
            var i=$(Menu).index(this)
            gotoPage(i);
        });
        /* 打開相應的標籤 */
        function gotoPage(i){
            $(Menu).removeClass("current").eq(i).addClass("current");
            $(Con).fadeOut(200).eq(i).fadeIn(200);
            $(Text).hide().eq(i).fadeIn(200);
            nowIndex=i;
        };
        /* 下一頁 */
        $(Next).click(function(){
            gotoR();
        });
        function gotoR(){
            nowIndex++;
            if(nowIndex > Counts-1){
                nowIndex=0;
            }
            gotoPage(nowIndex);
        };
        /* 上一頁 */
        $(Prev).click(function(){
            nowIndex--;
            if(nowIndex < 0){
                nowIndex=Counts-1
            }
            gotoPage(nowIndex);
        });
        /* 自動輪播 */
        function setAuto(){
            if(Counts>1){
                timer=setInterval(gotoR,3000);
            };
        };
        setAuto();
        /* 鼠標通過暫停,離開繼續輪播 */
        $(Box).hover(function(){
                    $(Prev).show();
                    $(Next).show();
                    if(timer){
                        clearInterval(timer);
                    }
                },
                function(){
                    $(Prev).hide();
                    $(Next).hide();
                    setAuto();
                });
        /*焦點圖*/ide

相關文章
相關標籤/搜索