封装jQuery渐隐图片轮换带背景大图插件

做过好多个插件封装了,这个算是公开发布的第一个吧,写法比较拙劣,还请雅正!

这是一个带背景图的整图轮换插件,网上比较多见的是单独的图片轮换,而这个插件不一样哦。

插件预览:封装jQuery渐隐图片轮换带背景大图
插件代码:

$(document).ready(function(e) {
//图片轮换插件
$(“#flash”).fnFlash({
num:3,timer:6000,speed:500,flash:”flash”,flash_img:”flash_img”,img_num:”img_num”
});
});
/*
* fnFlash 0.1
* Copyright (c) 2009 saqqdy http://www.saqqdy.com/
* Date: 2013-07-23
* 使用fnFlash
*/
(function($){
$.fn.extend({
fnFlash:function(opt,callback){
if(!opt)opt = {};
var _flash = $(“#” + opt.flash);
var _flash_img = $(“.” + opt.flash_img);
var _img_num = $(“.” + opt.img_num);
var _num = parseInt(opt.num,10);
var _this = _img_num.find(“li”);
var _speed = opt.speed ? parseInt(opt.speed,10) : 300;
var _timer = opt.timer ? parseInt(opt.timer,10) : 5000;
var changeImg = function(index){
var b = _img_num.find(“li.img_num_cur”).index();
if (index == b){return};
_this.unbind(“mouseover”,changeImgID);
_flash_img.removeClass(“img_cur”).hide();
_flash_img.eq(index).fadeIn(_speed).addClass(“img_cur”);
_this.removeClass(“img_num_cur”).eq(index).addClass(“img_num_cur”);
_this.bind(“mouseover”,changeImgID);
};
var changeImgID = function(){
var show = $(this).index();
changeImg(show);
};
var autoChangeID = function(i){
if(i < _num – 1){
i++;
}else{
i = 0;
};
changeImg(i);
};
var autoChange = function(){
if(_timer)_timerID = window.setInterval(function(){
var i = $(“.img_cur”).index();
autoChangeID(i);
},_timer);
};
var stopChange = function(){
if(_timer)window.clearInterval(_timerID);
};
_img_num.hover(stopChange,autoChange).mouseout();
_this.mouseover(changeImgID);
}
})
})(jQuery)

插件下载地址:[download id=”44″ format=”1″]