我有3个轮播，并且我尝试使用jquery在单击相应链接时显示每个轮播。
当我在div中添加css“ display：none”时，猫头鹰轮播的行为并不正确。轮播元素的大小会缩小，有时会消失。
我已经做了的jsfiddle它，我会很感激你的帮助找到了什么错误- https://jsfiddle.net/prtkvarma/yLjw7gsk/3/
谢谢。
以下只是代码的JS部分-
jQuery(document).ready(function($) {
$('.owl-one').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-two').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-three').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
/*showing/hiding particular carousels on clicking links*/
$('.link-promotions').click(function() {
$('.sec-casino-games').hide();
$('.sec-live-odds').hide();
$(".sec-promotions").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-casino-games').click(function() {
$('.sec-promotions').hide();
$('.sec-live-odds').hide();
$(".sec-casino-games").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-live-odds').click(function() {
$('.sec-promotions').hide();
$('.sec-casino-games').hide();
$(".sec-live-odds").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
});
通常，您应该避免使用内置特效，这些特效对利用大量视觉用户体验的库的元素上的内联样式进行硬编码。其原因是因为jQuery内置的特殊效果都直接更改了元素的样式属性，这通常会与库CSS规则冲突。
我已经自由地将大多数jQuery重写为更简单，更少冗余和精简的形式。要回答您的问题，最主要的是利用该.addClass()方法，该方法使您可以.animate()将类添加到元素中，就像这样做一样.hide()。使用此方法时，可以通过将以毫秒为单位的时间添加为第二个参数来完成.addClass()。
jQuery的
jQuery(document).ready(function($) {
$('.owl-carousel').each(function(index, element) {
jQuery(element).owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 4
}
}
});
});
var owl_content = jQuery('.owl-carousel');
var owl_links = jQuery('.select-link a');
jQuery(owl_links).each(function(index, element) {
jQuery(element).click(function(e) {
jQuery(owl_content).each(function(i, el) {
jQuery(el).addClass('c', 500);
if (i === index) {
jQuery(owl_content[index]).removeClass('c', 500);
console.log(i);
}
});
});
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
jQuery('.c.first').removeClass('c');
});
小提琴
https://jsfiddle.net/dixalex/yLjw7gsk/8/
资料来源
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句