建站知识

当前位置：首页 > 建站知识

Jquery封装幻灯片效果

前几天在我同事博客里面看到一篇幻灯片所以觉得用Jqeury写幻灯片也并不是很难就是和我在博客里面的tab自动切换的原理是一模一样的只是形式不同而已！所以今天也写了一个常见的幻灯片效果用Jquery写的很简单也是用我上次tab自动切换的js 所以原理没有什么可说的不懂的可以看看上次写的TAB自动切换代码：下面的一张截图：

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了横峰免费建站欢迎大家使用！

Jquery封装幻灯片效果

就是类似这种幻灯片：

下面是HTML结构和CSS样式

 
 
 
 
无标题文档

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;  //停留的时间 
    _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();  
}

下面传个附件看不懂可以下载下来先看看效果然后稍微理解下就ok了！其实说真的js重要但是HTML结构和CSS样式同样重要有时结构写好的话 css写好的话 js就很简单！！

附件：http://down.51cto.com/data/2359366

当前标题：Jquery封装幻灯片效果
新闻来源：http://bjjierui.cn/article/pdpdop.html

其他资讯

建站热线：13518219792
微信扫一扫在线咨询
QQ客服：
案例
价格