一个简单的图片切换 jQuery 插件

网上各种各样的图片切换插件多如牛毛，功能强大，效果出众。但在实际应用中可能不需要那么华丽的效果，因为华丽的效果背后还要附带图片、样式等资源。所以一个简单的纯粹进行切换的插件可能正符合要求。

 

下面这个简单的插件原理很简单，将匹配的元素全部隐藏后挨个切换，不只用于图片，还可用于任意元素的切换。

 

/* jQuery 自动切换插件 AutoSwitch 此插件将所有匹配的元素以固定的时间进行切换，实现幻灯片效果 用法： 1. $(' 选择符 ').autoSwitch(); 2. $(' 选择符 ').autoSwitch({ speed: 'fast', keeptime: 2000 }); */ ;(function($) { $.fn.autoSwitch = function(options) { options = jQuery.extend({ speed: 'normal', // 切换速度，可选值: slow, normal, fast keeptime: 5000 //每一个的停留时间，毫秒 }, options); var _this = this; var _count = _this.length; var _currentIndex = 0; if (_count > 1) { _this.hide(); _this.eq(0).show(); window.setInterval(function() { _currentIndex = ++_currentIndex % _count; _this.filter(':visible').hide(); _this.eq(_currentIndex).fadeIn(options.speed); }, options.keeptime); } return this; } })(jQuery);