Jquery封装幻灯片效果
前几天 在我同事博客里面看到一篇幻灯片 所以觉得用Jqeury写幻灯片也并不是很难 就是和我在博客里面的tab自动切换的原理是一模一样的 只是形式不同而已!所以今天也写了一个常见的幻灯片效果 用Jquery写的 很简单 也是用我上次tab自动切换的js 所以原理没有什么可说的 不懂的可以看看上次写的TAB自动切换代码:下面的一张截图:
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了横峰免费建站欢迎大家使用!
就是类似这种幻灯片:
下面是HTML结构和CSS样式
无标题文档
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://lswzjz.com/article/pdpdop.html