(function($) { $.fn.slide = function(options) { var defaults = { slidecontainer: $('.slideinner a'), effect: 'easeinquint', //轮播图切换动画风格 imgeffectout: 'easeinexpo', //里面元素动画离开风格 autoruntime: 3000, slidespeed: 1000, imgslidespeed: 800, imgdelay: 50, //里面小元素动画延长时间执行 nav: true, //点点列表 autorun: true, prevbtn: $('a.prev'), nextbtn: $('a.next') }; var el = $(this), settings = $.extend({}, defaults, options), leftpos = 0, navlist = "", timer = null, imgpos = '', ismove = true; /* *slides 移动方法 * */ $.fn.changeslide = function(settings, pos) { $(this).animate({ left: pos + "%" }, { duration: settings.slidespeed, easing: settings.effect, complete: function() { ismove = true; } }); }; $.fn.clickchangeslide = function(settings, pos) { $(this).css({ 'left': pos + "%", opacity: .9 }).delay(10).animate({ opacity: '1' }, { duration: settings.slidespeed, easing: settings.effect, complete: function() { ismove = true; } }); }; /* * 小元素动画 * * */ $.fn.imganimate = function(delaytime, imgeffectin, pos, where, settings) { var el = $(this); switch (where) { case 'right': el.stop(true).css({ 'left': '100%', 'opacity': '0' }).delay(delaytime+15).animate({ left: pos, opacity: '1' }, { duration: settings.imgslidespeed, easing: imgeffectin, complete: function() { el.css('left', pos); } }); el.parent().siblings().children().animate({ left: '20%', opacity: '0' }, { duration: 500, easing: settings.imgeffectout, complete: function() { el.css('left', pos); } }); break; case 'left': el.stop(true).css({ 'left': '0%', 'opacity': '0' }).delay(delaytime+15).animate({ left: pos, opacity: '1' }, { duration: settings.imgslidespeed, easing: imgeffectin, complete: function() { el.css('left', pos); } }); el.parent().siblings().children().animate({ left: '50%', opacity: '0' }, { duration: 500, easing: settings.imgeffectout, complete: function() { el.css('left', pos); } }); break; }; }; /* * 向左移动方法 * */ $.fn.moveleft = function() { if (!ismove) { return; }; ismove = false; var el = $(this); index = $(settings.slidecontainer).parent().find('.active').attr("data-index"); if (index <= total && index > 1) { current = $(settings.slidecontainer).eq(index - 1); next = $(settings.slidecontainer).eq(index - 2); if (next) { current.removeclass("active"); next.addclass("active"); changenavlist(); }; pos = ((number(index) - 2) * 100) * -1; el.changeslide(settings, pos); el.find('.active').imgmovesetting('left'); } else { tolast('first'); } }; /* * 向右移动方法 * */ $.fn.moveright = function() { if (!ismove) { return; }; ismove = false; var el = $(this); index = $(settings.slidecontainer).parent().find('.active').attr("data-index"); if (index >= 1 && index < total) { current = $(settings.slidecontainer).eq(index - 1); next = $(settings.slidecontainer).eq(index); if (next) { current.removeclass("active"); next.addclass("active"); changenavlist(); }; pos = ((number(next.attr("data-index")) - 1) * 100) * -1; el.changeslide(settings, pos); el.find('.active').imgmovesetting('right'); } else { tolast('last'); } }; //切换点列表 function changenavlist() { if (settings.nav) { var index = el.find('.active').attr("data-index"); $(".navlistbox li a").removeclass("active").eq(index - 1).addclass("active"); } }; //自动切换 function autorun() { if (settings.autorun) { clearinterval(timer); timer = setinterval(function() { el.moveright(); }, settings.autoruntime); } }; /* * 根据索引值切换 * */ $.fn.moveto = function(index) { var el = $(this), movewhere = ''; el.children().eq(index - 1).addclass('active').siblings().removeclass('active'); pos = ((index - 1) * 100) * -1; el.clickchangeslide(settings, pos); var nowindex = $(".navlistbox li a.active").attr('data-index'); if (index < nowindex) { movewhere = 'left'; } else { movewhere = 'right'; }; $(".navlistbox li").eq(index - 1).children().addclass('active').parent().siblings().children().removeclass('active'); el.find('.active').imgmovesetting(movewhere); }; $.fn.imgmovesetting = function(movew) { var el = $(this); if (movew) { $.each(el.children('.moveelem'), function(i) { var arr = $(this).attr('rel').split(','); var thisdelay = arr[0] - 0; var imgeffectin = arr[1]; var thisimgpos = $(this).attr('offsetleft'); $(this).imganimate(thisdelay, imgeffectin, thisimgpos, movew, settings); }); }; }; function tolast(move) { switch (move) { case 'last': el.find('a:first').css('margin-left', (el.children().length * 100) + "%"); el.changeslide(settings, -el.children().length * 100); el.find('a:first').imgmovesetting('right'); settimeout(function() { el.css('left', '0%'); el.find('a:first').css('margin-left', '0'); el.find('a:first').addclass('active').siblings().removeclass('active'); changenavlist(); }, settings.slidespeed + 50); break; case 'first': el.find('a:last').css('margin-left', -(el.children().length * 100) + "%"); el.changeslide(settings, 100); el.find('a:last').imgmovesetting('left'); settimeout(function() { el.css('left', -((el.children().length - 1) * 100) + "%"); el.find('a:last').css('margin-left', '0'); el.find('a:last').addclass('active').siblings().removeclass('active'); changenavlist(); }, settings.slidespeed + 50); break; } }; settings.prevbtn.hover(function() { $(this).css('opacity', '.5'); }, function() { $(this).css('opacity', '.2'); }); settings.nextbtn.hover(function() { $(this).css('opacity', '.5'); }, function() { $(this).css('opacity', '.2'); }); settings.nextbtn.click(function() { el.moveright(); }); settings.prevbtn.click(function() { el.moveleft(); }); el.parent().hover(function() { clearinterval(timer); settings.prevbtn.parent().show(); }, function() { autorun(); settings.prevbtn.parent().hide(); }); var total = $(settings.slidecontainer).length; $.fn.init(autorun()); $.each($(settings.slidecontainer), function(i) { $(this).css({ width: $(window).width(), position: "absolute", left: leftpos + "%" }).attr("data-index", i + 1); leftpos = leftpos + 100; if (settings.nav) { navlist += "