真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司

028-86922220

Jquery封裝幻燈片效果

前幾天在我同事博客里面看到一篇幻燈片所以覺得用Jqeury寫幻燈片也并不是很難就是和我在博客里面的tab自動(dòng)切換的原理是一模一樣的只是形式不同而已！所以今天也寫了一個(gè)常見的幻燈片效果用Jquery寫的很簡單也是用我上次tab自動(dòng)切換的js 所以原理沒有什么可說的不懂的可以看看上次寫的TAB自動(dòng)切換代碼：下面的一張截圖：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了橫峰免費(fèi)建站歡迎大家使用！

Jquery封裝幻燈片效果

就是類似這種幻燈片：

下面是HTML結(jié)構(gòu)和CSS樣式

 
 
 
 
無標(biāo)題文檔

tab1

tab2

tab3

new tabMarquee("#Marquee",3);

JS代碼如下:

// JavaScript Document 
 
function tabMarquee(obj,count){  
    _this = this;  
    _this.obj = obj;  
    _this.count = count;  
    _this.time = 3000;  //停留的時(shí)間 
    _this.n = 0;  
    var t;  
    this.slider = function(){  
        $(_this.obj + " .menu li").bind("mouseover",function(event){  
            $(event.target).addClass("current").siblings().removeClass("current");  
            var index = $(_this.obj + " .menu li").index(this);  
            $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();  
            _this.n = index;      
        })  
    }  
      
    this.addHover = function(){  
        $(_this.obj).hover(function(){  
            clearInterval(t);     
        },function(){  
            t = setInterval(_this.autoPlay,_this.time);   
        })    
    }  
    this.autoPlay = function(){  
        _this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n;  
        $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");      
    }  
    this.factory = function(){  
        this.slider();  
        this.addHover();  
        t = setInterval(this.autoPlay,_this.time);    
    }  
    this.factory();  
}