1，slider.js

/** * slider插件可悬停控制 */ ; $(function ($, window, document, undefined) {   Slider = function (container, options) { /* options = { auto: true, time: 3000, event: 'hover' | 'click', mode: 'slide | fade', controller: $(), activeControllerCls: 'className', exchangeEnd: $.noop } */
"use strict"; //strict mode not support by IE9-
if (!container) return;
var options = options || {}, currentIndex = 0, cls = options.activeControllerCls, delay = options.delay, isAuto = options.auto, controller = options.controller, event = options.event, interval, slidesWrapper = container.children().first(), slides = slidesWrapper.children(), length = slides.length, childWidth = container.width(), totalWidth = childWidth * slides.length;
function init() { var controlItem = controller.children();
mode();
event == 'hover' ? controlItem.mouseover(function () { stop(); var index = $(this).index();
play(index, options.mode); }).mouseout(function () { isAuto && autoPlay(); }) : controlItem.click(function () { stop(); var index = $(this).index();
play(index, options.mode); isAuto && autoPlay(); });
isAuto && autoPlay(); }
//animate mode function mode() { var wrapper = container.children().first();
options.mode == 'slide' ? wrapper.width(totalWidth) : wrapper.children().css({ 'position': 'absolute', 'left': 0, 'top': 0 }) .first().siblings().hide(); }
//auto play function autoPlay() { interval = setInterval(function () { triggerPlay(currentIndex); }, options.time); }
//trigger play function triggerPlay(cIndex) { var index;
(cIndex == length - 1) ? index = 0 : index = cIndex + 1; play(index, options.mode); }
//play function play(index, mode) { slidesWrapper.stop(true, true); slides.stop(true, true);
mode == 'slide' ? (function () { if (index > currentIndex) { slidesWrapper.animate({ left: '-=' + Math.abs(index - currentIndex) * childWidth + 'px' }, delay); } else if (index < currentIndex) { slidesWrapper.animate({ left: '+=' + Math.abs(index - currentIndex) * childWidth + 'px' }, delay); } else { return; } })() : (function () { if (slidesWrapper.children(':visible').index() == index) return; slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay); })();
try { controller.children('.' + cls).removeClass(cls); controller.children().eq(index).addClass(cls); } catch (e) { }
currentIndex = index;
options.exchangeEnd && typeof options.exchangeEnd == 'function' && options.exchangeEnd.call(this, currentIndex); }
//stop function stop() { clearInterval(interval); }
//prev frame function prev() { stop();
currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2);
isAuto && autoPlay(); }
//next frame function next() { stop();
currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex);
isAuto && autoPlay(); }
function a(){ alert('aaa') }
//init init();
//expose the Slider API return { prev: function () { prev(); }, next: function () { next(); }, stop: function(){ stop() } } };
}(jQuery, window, document));   2，主页调用，提前调用jquery,再调用slider.js <script type="text/javascript"> $(function () {   var bannerSlider = new Slider($('#banner_tabs'), { time: 2000, delay: 400, event: 'hover', auto: true, mode: 'fade', controller: $('#bannerCtrl'), activeControllerCls: 'active' });   $('#banner_tabs .flex-prev').click(function () { bannerSlider.prev() }); $('#banner_tabs .flex-next').click(function () { bannerSlider.next() });
$('.悬停的区域').mouseenter(function () { bannerSlider.stop() })   }) </script>