Javascript 获取下一个或上一个隐藏元素的高度,以设置父元素的高度。jquery
我有一个Javascript 获取下一个或上一个隐藏元素的高度,以设置父元素的高度。jquery,javascript,jquery,slider,carousel,hidden,Javascript,Jquery,Slider,Carousel,Hidden,我有一个ul,其中包含隐藏的图像,然后使用绝对定位将其加载到旋转木马中 这些图像的高度在桌面视图中受到限制,因此我可以控制父元素的高度,因为ul下面有一个小切换菜单 当我切换到手机时,我使用媒体查询将图像的宽度设置为100%,并重置高度。这意味着,随着图像高度的变化,每次滑动下一张或上一张幻灯片时,都必须计算“我的切换”菜单的位置 我目前有一个函数,返回当前幻灯片的高度,并使用它来设置元素的高度,但是如果用户向右滑动,我需要这个函数来计算下一幅图像的高度,如果用户向左滑动,则需要计算上一幅图像的
ul
,其中包含隐藏的图像,然后使用绝对定位将其加载到旋转木马中
这些图像的高度在桌面视图中受到限制,因此我可以控制父元素的高度,因为ul
下面有一个小切换菜单
当我切换到手机时,我使用媒体查询将图像的宽度设置为100%,并重置高度。这意味着,随着图像高度的变化,每次滑动下一张或上一张幻灯片时,都必须计算“我的切换”菜单的位置
我目前有一个函数,返回当前幻灯片的高度,并使用它来设置元素的高度,但是如果用户向右滑动,我需要这个函数来计算下一幅图像的高度,如果用户向左滑动,则需要计算上一幅图像的高度
这是我的代码:
// check height of slider
var chSliderHeight = function(){
var slider = $('.slider');
var sliderImg = slider.find('li:visible img');
var sliderImgNext = sliderImg.parent().next().find('img').height();
var sliderImgPrev = sliderImg.parent().prev().find('img').height();
var sliderH = sliderImg.get(0).height;
slider.css('height',sliderH + 40);
console.log(sliderH, sliderImgNext, sliderImgPrev);
};
$(window).on('load resize orientationchange',function(){
chSliderHeight();
});
变量sliderImgNext
和sliderImgPrev
看起来像是在返回上一张或下一张幻灯片的值,但我不知道如何在滑动函数中触发css高度规则
在此之前,我有我的刷卡功能:
images.wipetouch({
wipeLeft: function(result) {
target = $('ul.triggers li.selected').index();
if ( target === lastElem ) { target = 0; }
else { target = target+1; }
sliderResponseMobile(target);
chSliderHeight();
},
wipeRight: function() {
target = $('ul.triggers li.selected').index();
lastElem = triggers.length-1;
if ( target === 0 ) { target = lastElem; }
else { target = target-1; }
sliderResponseMobile(target);
chSliderHeight();
}
});
如果向左或向右滑动,我需要一些条件来运行稍微不同的函数或参数。也许这应该在成功函数中运行,我不是100%确定。也许是吊装
我发现很难回避在chSliderHeight
中编写函数的问题,该函数可用于wipeLeft
和wipeRight
函数
我只处理一个依赖项(以及加载的所有其他代码)
它还包含所有其他代码和变量。OK设法使其正常工作 我遇到了一个问题,因为滑块使用fadeIn/fadeOut函数,调用
slider.find('li:visible img')代码>返回的长度为2,因为调用函数时有两张幻灯片可见
因此,我将选择器更改为:
slider.find('li[class="active"] img');
现在长度是1
然后我编写了一个回调函数,如下所示:
var callback = function(){
var slider = $('.slider');
var sliderImg = slider.find('li[class="active"] img');
var sliderH = sliderImg.get(0).height;
slider.css('height',sliderH + 40);
};
并将回调函数传递到wipetouch函数中,如下所示:
images.wipetouch({
wipeLeft: function(result) {
target = $('ul.triggers li.selected').index();
if ( target === lastElem ) { target = 0; }
else { target = target+1; }
sliderResponseMobile(target);
callback();
},
wipeRight: function() {
target = $('ul.triggers li.selected').index();
lastElem = triggers.length-1;
if ( target === 0 ) { target = lastElem; }
else { target = target-1; }
sliderResponseMobile(target);
callback();
}
});
sliderResponseMobile(目标)代码>现在看起来是这样的(因此它会在每张幻灯片中添加一个活动类):
这是一份工作报告
function sliderResponseMobile(target) {
images.removeClass('active').fadeOut(200).eq(target).fadeIn(400).addClass('active');
}