jquery - 导航轮播图

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()

}

autoPlay:function(){

autoPlay()

}

}

};

}(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()

})

$('.悬停离开后').mouseleave(function () {

bannerSlider.autoPlay()

})

})

</script>