; (function ($) { $.extend({ 'foucs': function (con) { var $container = $('#index_b_hero') , $imgs = $container.find('li.hero') , $leftBtn = $container.find('a.prev') , $rightBtn = $container.find('a.next') , config = { interval: con && con.interval || 3500, animateTime: con && con.animateTime || 500, direction: con && (con.direction === 'left'), _imgLen: $imgs.length } , i = 0 , getNextIndex = function (y) { return i + y >= config._imgLen ? i + y - config._imgLen : i + y; } , getPrevIndex = function (y) { return i - y < 0 ? config._imgLen + i - y : i - y; } , silde = function (d) { $imgs.eq((d ? getPrevIndex(2) : getNextIndex(2))).css('left', (d ? '-2400px' : '2400px')); $imgs.animate({ 'left': (d ? '+' : '-') + '=1200px' }, config.animateTime); i = d ? getPrevIndex(1) : getNextIndex(1); $imgs.eq(i).css('left', 0).find('.content').fadeIn(); $imgs.eq(i+1).css('left','1200px').find('.content').fadeOut(100); $imgs.eq(i-1).css('left','-1200px').find('.content').fadeOut(100); } , s = setInterval(function () { silde(config.direction); }, config.interval); $imgs.eq(i+1).css('left','1200px').find('.content').fadeOut(100); $imgs.eq(i-1).css('left','-1200px').find('.content').fadeOut(100); $imgs.eq(i).css('left', 0).end().eq(i + 1).css('left', '1200px').end().eq(i - 1).css('left', '-1200px'); $container.find('.hero-wrap').add($leftBtn).add($rightBtn).hover(function () { clearInterval(s); }, function () { s = setInterval(function () { silde(config.direction); }, config.interval); }); $rightBtn.click(function () { if ($(':animated').length === 0) { silde(false); } }); $leftBtn.click(function () { if ($(':animated').length === 0) { $imgs.eq(i).css('left', 0).find('.content').fadeOut(); silde(true); } }); } }); }(jQuery));