jquery.easing['jswing'] = jquery.easing['swing']; jquery.extend( jquery.easing, { def: 'easeoutquad', swing: function (x, t, b, c, d) { return jquery.easing[jquery.easing.def](x, t, b, c, d); }, easeoutcirc: function (x, t, b, c, d) { return c * math.sqrt(1 - (t=t/d-1)*t) + b; }, easeoutquad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeoutbounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } }); ;(function($) { $.fn.extend({ "imgchange": function(o) { o = $.extend({ //例: $('#bigimg li').imgchange({thumbobj:'#tlist li',effect:'scroll',speed:600}) thumbobj: null,//缩略图对象,默认为空;例:thumbobj:'.tlist li' botprev: null,//上一个对象;例:botprev:'.prev' botnext: null,//下一个对象;例:botnext:'.next' effect: 'fade',//切换效果,效果有fade(渐显),scroll(滚动),wfscroll(无缝滚动),slide(滑落),cutin(切入),alternately(交替),wb(微博),accordion(手风琴)默认为:'fade' curclass: 'act',//当前缩略图对象的样式,默认为:'act' thumboverevent: true,//鼠标是否悬停切换,默认为:悬停切换 speed: 400,//切换速度,默认为:400秒 autochange: true,//是否自动切换,默认为:自动切换 clickfalse: false,//缩略图对象的链接是否有效,默认为:有效 changetime: 5000,//自动切换时间,默认为5000ms切换一次 delaytime: 0,//鼠标悬停或点击后的延迟时间 showtxt: false,//是否显示标题,标题调用img里的alt值 visible:1,//显示几个对象,effect==scoll且circular==true时有效 start: 0,//从第几个对象开始 ,effect==scoll且circular==true时有效 steps:1, //每次滚动的数量,effect==scoll且circular==true时有效 circular: false,//是否循环滚动 vertical:true,//滚动方向,也可以是切换方向 fqwidth: 30,//手风琴小图的尺寸,effect==accordion时有效 easing: 'swing'//动画效果,需要easing插件支持,effect==scoll时有效 }, o || {}); var _self = $(this); var _p = _self.parent(); var _pp=_p.parent(); var thumbobj; var size = _self.size(); var nowindex = 0; var index; var startrun; var delayrun; var _img = _self.find('img'); var b = false, animcss = o.vertical ? "top": "left", sizecss = o.vertical ? "height": "width"; var i; var g = o.vertical ? _self.outerheight(true) : _self.outerwidth(true) //初始化 if (o.showtxt) { _p.after('' + _img.eq(0).attr('alt') + '') } if (o.effect == 'scroll'||o.effect == 'wfscroll') { //滚动初始化 var v = o.visible; if ( size <= v ) return false; //对象小于可见数时中止 if (o.circular) { if(o.effect == 'scroll'){ _p.prepend(_self.slice(size - v - 1 + 1).clone()).append(_self.slice(0, v).clone()); o.start += v }else{ _p.prepend(_self.clone()) } } //var f = $('li', _p), var f = _p.children(), itemlength = f.size(), curr = o.start, h = g * itemlength, j = g * v, scrollsize = g*size; //alert(itemlength); f.css({ overflow: 'hidden', float: o.vertical ? 'none': 'left', width: _self.width(), height: _self.height() }); _p.css({ margin: 0, padding: 0, position: 'relative', liststyle: 'none', overflow:'hidden', zoom:1, zindex: 1 }).css(sizecss, h + 'px').css(animcss, -(curr * g));; _pp.css({ visibility: 'visible', overflow: 'hidden', position: 'relative', zindex: 2, left: 0 }).css(sizecss, j + 'px'); } else if (o.effect == 'accordion') { //手风琴初始化 _p.css(!o.vertical ? { width: g + (size - 1) * o.fqwidth + 'px', overflow: 'hidden' }: { height: g + (size - 1) * o.fqwidth + 'px', overflow: 'hidden' }); _self.css(!o.vertical ? { width: o.fqwidth + 'px', float: 'left', overflow: 'hidden' }: { height: o.fqwidth + 'px', float: 'none', overflow: 'hidden' }).eq(0).addclass('act').animate(!o.vertical ? { width: g + 'px' }: { height: g + 'px' }, 800, o.easing).end().click(function() { index = _self.index($(this)); fadeab(); if (o.clickfalse) { return false } }); if (o.thumboverevent) { _self.hover(function() { index = _self.index($(this)); delayrun = settimeout(fadeab, o.delaytime) }, function() { cleartimeout(delayrun) }) } } else if (o.effect == 'wb') { //微博效果初始化 _p.css({ position: 'relative' }); _pp.css({ height: g * o.visible, overflow: 'hidden', position:'relative' }) } else { _self.hide().eq(0).show() }; //悬停或点击切换 if (o.thumbobj && !o.circular) { thumbobj = $(o.thumbobj); thumbobj.removeclass(o.curclass).eq(0).addclass(o.curclass); thumbobj.click(function() { index = thumbobj.index($(this)); fadeab(); if (o.clickfalse) { return false } }); if (o.thumboverevent) { thumbobj.hover(function() { index = thumbobj.index($(this)); delayrun = settimeout(fadeab, o.delaytime) }, function() { cleartimeout(delayrun) }) } } //上一个下一个 if (o.botnext) { $(o.botnext).click(function() { if (_self.queue().length < 1) { runnext() } return false }) } if(o.thumbobj&&o.circular) $.each($(o.thumbobj), function(i, a) { $(a).mouseover(function() { $(o.thumbobj).removeclass(o.curclass).eq(i).addclass(o.curclass); return go(o.visible + i); }) }); if (o.botprev) { $(o.botprev).click(function() { if (o.effect == 'scroll' && o.circular) { return go(curr - o.steps) } else { if (_self.queue().length < 1) { index = (nowindex + size - 1) % size; fadeab() } return false } }) } //自动切换 if(o.effect=='wfscroll'){ startrun = setinterval(marquee, o.changetime); _pp.hover(function() { clearinterval(startrun); }, function() { startrun = setinterval(marquee, o.changetime); }); }else if (o.autochange) { startrun = setinterval(runnext, o.changetime); _p.add(thumbobj).add(o.botprev).add(o.botnext).hover(function() { clearinterval(startrun) }, function() { startrun = setinterval(runnext, o.changetime) }) } //主函数 function fadeab() { if (nowindex != index) { if (o.thumbobj) { $(o.thumbobj).removeclass(o.curclass).eq(index).addclass(o.curclass) } if (size <= index) { nowindex = index; return false } if (o.speed <= 0) { //正常切换 _self.eq(nowindex).hide().end().eq(index).show() } else if (o.effect == 'fade') { //淡入淡出 _self.stop(true, true).eq(nowindex).fadeout(o.speed).end().eq(index).fadein(o.speed) } else if (o.effect == 'scroll') { //滚动 _p.stop(true, true).animate(!o.vertical ? { left: -((index) * g) }: { top: -((index) * g) }, o.speed, o.easing) } else if (o.effect == 'cutin') { //切入 _self.css({zindex: 1,display:'block'}).stop(true, true).eq(nowindex).css({ zindex: 5, opacity: 2 }).end().eq(index).css({ zindex: 6, top: '-' + g + 'px' }).animate({ opacity: 1, top: 0 }, o.speed, o.easing) } else if (o.effect == 'alternately') { //交替 _self.css({ display: 'none' }).stop(true, true).eq(nowindex).css({ zindex: 10, display: 'block' }).animate(!o.vertical ? { left: '-' + g / 2 + 'px' }: { top: '-' + g / 2 + 'px' }, o.speed, function() { $(this).css({ zindex: 5 }).animate(!o.vertical ? { left: 0 }: { top: 0 }, o.speed) }).end().eq(index).css({ display: 'block' }).animate(!o.vertical ? { left: g / 2 + 'px' }: { top: g / 2 + 'px' }, o.speed, function() { $(this).css({ zindex : 10 }).animate(!o.vertical ? { left: 0 }: { top: 0 }, o.speed) }) } else if (o.effect == 'accordion') { //手风琴 _self.stop(true, true).eq(nowindex).removeclass('act').animate(!o.vertical ? { width: o.fqwidth + 'px' }: { height: o.fqwidth + 'px' }, o.speed, o.easing).end().eq(index).addclass('act').animate(!o.vertical ? { width: g + 'px' }: { height: g + 'px' }, o.speed, o.easing) } else if (o.effect == 'wb') { //微博 _p.stop(true, true).animate({ top: (g + g / 4) + 'px' }, o.speed, function() { _p.children().last().prependto(_p); _p.children().first().hide(); _p.css({ top: 0 }).children().first().fadein(800) }) } else { //slide _self.stop(true, true).eq(nowindex).css({zindex:10}).slideup(o.speed).end().eq(index).css({zindex:5}).slidedown(o.speed) } //切换标题 if (o.showtxt) { var _txt = _img.eq(index).attr('alt'); var _url = _img.eq(index).parent().attr('href'); _p.siblings('.txt').html(_txt).attr('href', _url) } nowindex = index } } //无缝滚动函数 function marquee() { if (o.vertical) { if (_pp.scrolltop() >= scrollsize) { _pp.scrolltop(_pp.scrolltop() - scrollsize + o.steps); } else { i = _pp.scrolltop(); i += o.steps; _pp.scrolltop(i) } } else { if (_pp.scrollleft() >= scrollsize) { _pp.scrollleft(_pp.scrollleft() - scrollsize + o.steps); } else { i = _pp.scrollleft(); i += o.steps; _pp.scrollleft(i); } } }; //滚动函数 function go(a) { if (size <= o.steps) return false; if (!b) { if (o.beforestart) o.beforestart.call(this, vis()); if (o.circular) { if (a <= o.start - v - 1) { _p.css(animcss, -((itemlength - (v * 2)) * g) + 'px'); curr = a == o.start - v - 1 ? itemlength - (v * 2) - 1 : itemlength - (v * 2) - o.steps } else if (a >= itemlength - v + 1) { _p.css(animcss, -((v) * g) + 'px'); curr = a == itemlength - v + 1 ? v + 1 : v + o.steps } else curr = a } else { if (a < 0 || a > itemlength - v) return; else curr = a } b = true; _p.animate(animcss == 'left' ? { left: -(curr * g) }: { top: -(curr * g) }, o.speed, o.easing, function() { if (o.afterend) o.afterend.call(this, vis()); b = false }) } return false } function vis() { return f.slice(curr).slice(0, v) }; //下一个函数 function runnext() { index = (nowindex + 1) % size; if (o.effect == 'scroll' && o.circular) { return go(curr + o.steps) } else { fadeab() } } //自定义函数 function css(a, b) { return parseint($.css(a[0], b)) || 0 }; } }) })(jquery);