分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

jquery - 导航轮播图

jQuery   发布时间：2022-04-19  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery - 导航轮播图，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_7@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(),
@R_689_10586@lWidth = 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(@R_689_10586@lWidth) : 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,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 - 导航轮播图全部内容，希望文章能够帮你解决jquery - 导航轮播图所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jquery图导航播轮
猜你在找的jQuery相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap