码迷,mamicode.com
首页 > Web开发 > 详细

jquery - 导航轮播图

时间:2019-07-06 19:28:20      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:val   try   wrapper   classname   next   interval   lex   eof   style   

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>

jquery - 导航轮播图

标签:val   try   wrapper   classname   next   interval   lex   eof   style   

原文地址:https://www.cnblogs.com/500m/p/11143527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!