您的位置:时时app平台注册网站 > web前端 > 听大人说jQuery的淡入淡出可自行切换的幻灯插件

听大人说jQuery的淡入淡出可自行切换的幻灯插件

2019-11-02 01:14

在这里篇小说中,作者完结了一个基本的选项卡功用:请猛击后边的链接>>   [js插件开辟教程]原生js仿jquery架构扩张开发选项卡插件.

//切换区域鼠标划入结束活动切换,划出继续自动
iset.field.hover(function(){
stopFun();
}, function(){
scrollFun();
});
}
});
})(jQuery);

1  _api.next = function(){
2             var i = ( _index   1 ) % _contentLen;
3             _api.setIndex( i );
4         };

您或者感兴趣的小说:

  • jquery 淡入淡出效果的简便完毕
  • jQuery 淡入淡出、张开减弱菜单实今世码
  • jquery落成通用版鼠标经过淡入淡出效果
  • 依据jquery达成的文字淡入淡出效果
  • 听闻jQuery完结淡入淡出效果轮播图
  • 依靠jquery的淡入淡出选项卡效果代码
  • jQuery达成DIV层淡入淡出拖动特效的方法
  • jquery达成带渐变淡入淡出并向右依次展开的生龙活虎类别菜单功效实例
  • jQuery完毕图片文字淡入淡出效果
  • 原生js和jQuery达成淡入淡出轮播效果
  • jQuery达成基本淡入淡出效果的方法详整
1 if ( options.effect == 'fade' ) {
2             tabContent.style.position = 'relative';
3             for( var i = 0; i < tabContentEle.length; i   ) {
4                 tabContentEle[i].style.position = 'absolute';
5             }
6             tabContentEle[opt.activeIndex].style.zIndex = _contentLen   1;
7             opt.delay  = opt.duration;
8         }

体制文件无须引进,若使用DEMO中的结构,可径直将样式统大器晚成于项目页面中.建议样式自定义.

 1 _api.stop = function(){
 2             timer && clearInterval( timer );
 3         };
 4 
 5         _api.start = function(){
 6             _api.stop();
 7             timer = setInterval( function(){
 8                 _api.next();
 9             }, opt.delay );
10         };
  1. 参数高度自定义;
  2. 可再度调用且与不影响;
  3. 插件文件小,压缩后仅1.04k,开荒版3.29k.
    示范及下载 

1,调用start()函数,让索引 1

其实便是二个幻灯效果,思考到使用方便,就封装成叁个插件了.
插件特点

索引 1之后,再切改选项卡

<script src=";
<script src="js/jquery.iFadeSldie.pack.js"></script>

index = 0

;(function($){
$.fn.extend({
iFadeSlide: function(options){
//插件参数起先化
var iset={
field:$('div#slide img'), //切换来分集合
icocon:$('div.ico'), //索引容器
hoverCls:'high', //切换至当下目录高亮突显样式
curIndex:0, //暗许高亮显示的索引值,索引值为0起初
outTime:200, //成分淡出时间(ms)
in提姆e:300, //成分淡入时间(ms)
interval:3000 //成分切换间距时间(ms)
};
options=options || {};
$.extend(iset,options); //归总参数对象.若options传入有新值则覆盖iset中对应值,不然使用默许值.
//依据切换到分量生成对应的索引值列表并插入到切换区域中
var ulcon = "<ul>";
iset.field.each(function(i){
ulcon = ulcon '<li>' (i 1) '</li>';
});
ulcon = '</ul>';
iset.icocon.append(ulcon);

(自动切换,结束调节,发光度渐变 ) 效果预览:

其他
本插件可自由使用,包罗其它款式的商业用途,但使用时请勿必注脚版权归属.
迎接提议疑问及提议, 并期望对本插件扩展.

还紧缺七个常用的切换(自动切换与折射率渐变),当然有相恋的人会说,还会有左右,上下等等,这一个动画会放在核心图(幻灯片)插件连串.

  1. 在页面中调用插件并传播切换来分的参数, 若为空或未传入的参数,均按插件中的暗中同意参数实行.譬如如下代码是DEMO演示中的三组幻灯切换调用:

2,选项卡导航部分,增加事件调控 自动播放的行车制动器踏板和初叶

var ico = iset.icocon.find('li'); //索引列表集合
var size = iset.田野.size(); //切换元素量
var index = 0; //开始索引值
var clearFun=null;
//淡出淡入函数
var fadeFun = function(obj){
index = ico.index(obj); //取当前索引值
//淡出当前可以见到成分,并由此索引值找到要淡入的因素
iset.field.filter(':visible').fadeOut(iset.outTime, function(){
iset.field.eq(index).fadeIn(iset.inTime);
});
//为当前索引增加高亮样式并移除同级成分中的高亮样式
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset.hoverCls);
};
//切换函数
var changeFun = function(){
index ; //积存索引值
if (index == size){index = 0}; //当索引值等于切换来分量时,初叶化为0
ico.eq(index).trigger('mouseleave'); //为当前的目录模拟鼠标划出成分区事件
};
//自动切换函数
var scrollFun = function(){
clearFun = setInterval(function(){
changeFun()
}, iset.interval);
};
//停止活动切换函数
var stopFun = function(){
clearInterval(clearFun);
};

index为近年来入选的选项卡 索引

复制代码 代码如下:

那一个思路很简短,开启放大计时器,让选项卡的索引 1,加到4的时候(选项卡的长短)从0起首

scrollFun(); //初步自动切换

 1         var defaults = {
 2             contentClass : 'tab-content',
 3             navClass : 'tab-nav',
 4             activeClass : 'active',
 5             triggerElements : '*',
 6             activeIndex : 0,
 7             evType : 'click',
 8             effect : 'none',
 9             auto : false,
10             delay : 3000,
11             duration : 1000
12         };

复制代码 代码如下:

当index = 0,他下一张正是1,  通过上边的取余操作,i = 1

在意,调用插件部分须置入插件文件引用前边.
主导代码

价值观做法:

测验文件打包下载

auto: false(不会自动切换) / true ( 开启自动切换 )

//索引区域鼠标划入甘休活动切换并切换到分至近些日子目录,鼠标划出初步化索引至当下值(不然鼠标划出切换会乱)
ico.hover(function(){
stopFun();
fadeFun(this);
}, function(){
fadeFun(this);
}).eq(iset.curIndex).mouseleave(); //起初高亮呈现的索引值

机关注换的兑现:

$(function(){
//SAMPLE-A调用---未传入任何参数,调用暗中认可参数
$('div#slide').iFadeSlide();
//SAMPLE-B调用---传入新的参数,将覆盖原有参数,未传入的施用暗许值
$('div#slide_b').iFadeSlide({
field: $('div#slide_b a'),
icocon:$('div.ico_b'),
hoverCls: 'high_b',
curIndex: 2, //索引值0起初,故此处设置为第3项高亮
interval: 2000
});
//SAMPLE-C调用---传入新的参数,将蒙蔽原有参数,未传入的采纳暗中认可值
$('div#slide_c').iFadeSlide({
field: $('div#slide_c img'),
icocon: $('div.ico_c'),
outTime:100,
inTime: 200
});
});

if ( index == 4 ) {

复制代码 代码如下:

 1 if ( _index != index ) {
 2                         tabContentEle[_index].style.zIndex = _contentLen   1;
 3                         for (var i = 0; i < tabContentEle.length; i  ) {
 4                             if (i != _index) {
 5                                 tabContentEle[i].style.zIndex = ( index   _contentLen - ( i   1 ) ) % _contentLen   1;
 6                                 tabContentEle[i].style.opacity = 1;
 7                             }
 8                         }
 9                         animate(tabContentEle[_index], {'opacity': 0}, function () {
10                             tabContentEle[_index].style.zIndex = ( index   _contentLen - ( _index   1 ) ) % _contentLen   1;
11                             _index = index;
12                         });
13                     }

动用方法
1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有此外js文件,可与之统一以减小http央求),引进地点自定义;

当index = 3,他下一张就是0, 通过上边的取余操作,i = 0

effect: none(没有特效) / fade( 光滑度切换 )

 

完整的js代码有220行:

var i = ( index 1 ) %  4

delay : 多少时间 切换一个选项卡

彩世界网址 1彩世界网址 2

彩世界网址 3

聊到底在setIndex方法:扩大光滑度变化

好了,关键的笔触和本事有了,大家起头拼接框架了:

基于opt配置,判定是或不是开启了auto自动切换功用

defaults参数,扩张多少个布局:

start与stop方法?

}

 1  //是否自动播放
 2         if ( opt.auto ) {
 3             for( var i = 0 ; i < tabNavEle.length; i   ){
 4                 tabNavEle[i].index = i;
 5                 tabNavEle[i].onmouseover = function(){
 6                     _api.stop();
 7                     _api.setIndex( this.index );
 8                 };
 9                 tabNavEle[i].onmouseout = function(){
10                     _api.start();
11                     _api.setIndex( this.index );
12                 };
13             }
14             _api.start();
15         }

index = 0

假若打开了,做两件事情:

调用next方法,你应有猜获得next方法做的工作正是索引 1 吧

index

这种艺术无需判别边界,只供给一句代码。在事实上支付中,把非常4替换到选项卡的长度

View Code

  1 /**
  2  * Created by ghostwu(吴华).
  3  */
  4 (function(){
  5     var G = function( selectors, context ){
  6         return new G.fn.init( selectors, context );
  7     }
  8     G.fn = G.prototype = {
  9         length : 0,
 10         constructor : G,
 11         size : function(){
 12             return this.length;
 13         },
 14         init : function( selector, context ){
 15             this.length = 0;
 16             context = context || document;
 17             if ( selector.indexOf( '#' ) == 0 ){
 18                 this[0] = document.getElementById( selector.substring( 1 ) );
 19                 this.length = 1;
 20             }else {
 21                 var aNode = context.querySelectorAll( selector );
 22                 for( var i = 0, len = aNode.length; i < len; i   ) {
 23                     this[i] = aNode[i];
 24                 }
 25                 this.length = len;
 26             }
 27             this.selector = selector;
 28             this.context = context;
 29             return this;
 30         }
 31     }
 32 
 33     G.fn.init.prototype = G.fn;
 34     G.extend = G.fn.extend = function () {
 35         var i = 1,
 36             len = arguments.length,
 37             dst = arguments[0],
 38             j;
 39         if (dst.length === undefined) {
 40             dst.length = 0;
 41         }
 42         if (i == len) {
 43             dst = this;
 44             i--;
 45         }
 46         for (; i < len; i  ) {
 47             for (j in arguments[i]) {
 48                 dst[j] = arguments[i][j];
 49                 dst.length  ;
 50             }
 51         }
 52         return dst;
 53     };
 54 
 55     function css(obj, attr, value) {
 56         if (arguments.length == 3) {
 57             obj.style[attr] = value;
 58         } else {
 59             if (obj.currentStyle) {
 60                 return obj.currentStyle[attr];
 61             } else {
 62                 return getComputedStyle(obj, false)[attr];
 63             }
 64         }
 65     }
 66 
 67     function animate(obj, attr, fn) {
 68         clearInterval(obj.timer);
 69         var cur = 0;
 70         var target = 0;
 71         var speed = 0;
 72         var start = new Date().getTime();//起始时间
 73         obj.timer = setInterval(function () {
 74             var bFlag = true;
 75             for (var key in attr) {
 76                 if (key == 'opacity') {
 77                     cur = css(obj, 'opacity') * 100;
 78                 } else {
 79                     cur = parseInt(css(obj, key));
 80                 }
 81                 target = attr[key];
 82                 speed = ( target - cur ) / 8;
 83                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 84                 if (cur != target) {
 85                     bFlag = false;
 86                     if (key == 'opacity') {
 87                         obj.style.opacity = ( cur   speed ) / 100;
 88                         obj.style.filter = "alpha(opacity:"   ( cur   speed )   ")";
 89                     } else {
 90                         obj.style[key] = cur   speed   "px";
 91                     }
 92                 }
 93             }
 94             if (bFlag) {
 95                 var end = new Date().getTime();//结束时间
 96                 console.log( '总计:',  ( end - start ) );
 97                 clearInterval(obj.timer);
 98                 fn && fn.call(obj);
 99             }
100         }, 30 );
101     }
102 
103     G.fn.tabs = function( options ){
104         options = options || {};
105         var defaults = {
106             contentClass : 'tab-content',
107             navClass : 'tab-nav',
108             activeClass : 'active',
109             triggerElements : '*',
110             activeIndex : 0,
111             evType : 'click',
112             effect : 'none',
113             auto : false,
114             delay : 3000,
115             duration : 1000
116         };
117 
118         var opt = G.extend( {}, defaults, options );
119 
120         var tabContent = this[0].querySelector( "."   opt.contentClass );
121         var tabContentEle = tabContent.children;
122         var tabNavEle = this[0].querySelectorAll( "."   opt.navClass   '>'   opt.triggerElements );
123 
124         var _contentLen = tabContentEle.length; //选项卡个数
125         var _index = opt.activeIndex;
126         var timer = null;
127 
128         if ( options.effect == 'fade' ) {
129             tabContent.style.position = 'relative';
130             for( var i = 0; i < tabContentEle.length; i   ) {
131                 tabContentEle[i].style.position = 'absolute';
132             }
133             tabContentEle[opt.activeIndex].style.zIndex = _contentLen   1;
134             opt.delay  = opt.duration;
135         }
136 
137         var _api = {};
138 
139         _api.next = function(){
140             var i = ( _index   1 ) % _contentLen;
141             _api.setIndex( i );
142         };
143 
144         _api.stop = function(){
145             timer && clearInterval( timer );
146         };
147 
148         _api.start = function(){
149             _api.stop();
150             timer = setInterval( function(){
151                 _api.next();
152             }, opt.delay );
153         };
154 
155         _api.setIndex = function( index ){
156             //当前标签加上active样式,其余标签删除active样式
157             for ( var i = 0; i < _contentLen; i   ) {
158                 if ( tabNavEle[i].classList.contains( 'active' ) ) {
159                     tabNavEle[i].classList.remove('active');
160                 }
161             }
162             tabNavEle[index].classList.add( 'active' );
163             switch ( opt.effect ){
164                 case 'fade':
165                     if ( _index != index ) {
166                         tabContentEle[_index].style.zIndex = _contentLen   1;
167                         for (var i = 0; i < tabContentEle.length; i  ) {
168                             if (i != _index) {
169                                 tabContentEle[i].style.zIndex = ( index   _contentLen - ( i   1 ) ) % _contentLen   1;
170                                 tabContentEle[i].style.opacity = 1;
171                             }
172                         }
173                         animate(tabContentEle[_index], {'opacity': 0}, function () {
174                             tabContentEle[_index].style.zIndex = ( index   _contentLen - ( _index   1 ) ) % _contentLen   1;
175                             _index = index;
176                         });
177                     }
178                     break;
179                 default:
180                     for ( var i = 0; i < _contentLen; i   ) {
181                         tabContentEle[i].style.display = 'none';
182                     }
183                     tabContentEle[index].style.display = 'block';
184                     _index = index;
185             }
186         }
187 
188         _api.setIndex( _index ); //默认的选项卡
189 
190         //所有的标签绑定事件
191         for( var i = 0, len = tabNavEle.length; i < len; i   ) {
192             tabNavEle[i].index = i;
193             tabNavEle[i].addEventListener( opt.evType, function(){
194                 var i = this.index;
195                 _api.setIndex( i );
196             }, false );
197         }
198 
199         //是否自动播放
200         if ( opt.auto ) {
201             for( var i = 0 ; i < tabNavEle.length; i   ){
202                 tabNavEle[i].index = i;
203                 tabNavEle[i].onmouseover = function(){
204                     _api.stop();
205                     _api.setIndex( this.index );
206                 };
207                 tabNavEle[i].onmouseout = function(){
208                     _api.start();
209                     _api.setIndex( this.index );
210                 };
211             }
212             _api.start();
213         }
214 
215         return this;
216     }
217 
218     var $ = function( selectors, context ){
219         return G( selectors, context );
220     }
221     window.$ = $;
222 })();

小技能(揣摸很两人都并未有用过):

duration: 发光度开启,那个才会用到,表示,多久内 完毕反射率的切换

当展开发光度变化的时候,把选项卡成分设置成定位情势,当前当选的选项卡,层级为最高!!! ( 倘若不是最高层级,那么暗中同意是终极三个选项卡在最上边,所以 “内容4” 就能够在最上层,显明不是我们想要的结果)层级 定位 这风流洒脱招也很常用,日常用来做展现隐蔽,和折射率变化.

本文由时时app平台注册网站发布于web前端,转载请注明出处:听大人说jQuery的淡入淡出可自行切换的幻灯插件

关键词: