资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Jquery封装幻灯片效果

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

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

 

Jquery封装幻灯片效果

就是类似这种幻灯片：

下面是HTML结构和CSS样式

 

  1.  
  2.  
  3.  
  4.  
  5. 无标题文档 
  6.  
  7.    
  8.  
  9.  
  10.  
  11.  
  12.        
  13.          
  14.             
 
  •             
    •  
  •             
    •  
  •          
  •          
  •             tab1
    •  
  •             
  • tab2
    •  
  •             tab3
    •  
  •          
  •        
  •      
  •         new tabMarquee("#Marquee",3);  
  •      
  •  
  •  

    • JS代码如下:

     

    1. // JavaScript Document 
    2.  
    3. function tabMarquee(obj,count){  
    4.     _this = this;  
    5.     _this.obj = obj;  
    6.     _this.count = count;  
    7.     _this.time = 3000;  //停留的时间 
    8.     _this.n = 0;  
    9.     var t;  
    10.     this.slider = function(){  
    11.         $(_this.obj + " .menu li").bind("mouseover",function(event){  
    12.             $(event.target).addClass("current").siblings().removeClass("current");  
    13.             var index = $(_this.obj + " .menu li").index(this);  
    14.             $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();  
    15.             _this.n = index;      
    16.         })  
    17.     }  
    18.       
    19.     this.addHover = function(){  
    20.         $(_this.obj).hover(function(){  
    21.             clearInterval(t);     
    22.         },function(){  
    23.             t = setInterval(_this.autoPlay,_this.time);   
    24.         })    
    25.     }  
    26.     this.autoPlay = function(){  
    27.         _this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n;  
    28.         $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");      
    29.     }  
    30.     this.factory = function(){  
    31.         this.slider();  
    32.         this.addHover();  
    33.         t = setInterval(this.autoPlay,_this.time);    
    34.     }  
    35.     this.factory();  
    36. } 

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

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

    网站名称：Jquery封装幻灯片效果
    文章地址：http://cdkjz.cn/article/pdpdop.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    H5网站制作雅安托管服务器SSL证书成都网站推广绵竹网站建设seo关键词优化成都网站建设哪家好成都logo设计公司关键词优化四川服务器托管

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图