gpt4 book ai didi

javascript - 根据当前幻灯片高度动态更改 div 的高度

转载 作者:太空宇宙 更新时间:2023-11-04 01:28:23 25 4
gpt4 key购买 nike

我在以下页面上有一个文本 slider :

链接已删除

我想要做的是让包含的 DIV 在加载包含大量文本的幻灯片时更改它的高度,这样它就不会被 chop 。

                var slides = $('.slide');
var container = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();


//if user clicked on prev button

$('#buttons a').click(function (e) {
//slide the item

if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}

if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}

//cancel the link behavior
return false;

最佳答案

从#slides li 中删除以下行

height: 250px;

您现在应该使用 javascript 来更改“幻灯片”元素的高度。这是一个适用于您的页面的 hack 示例,但您显然应该对其进行一些修饰以适合您的页面。更改幻灯片后运行它。 (也许把它连接到按钮上)

//The second list item seems to be the visible one. This will likely fail with less than 2 items.
var newHeight = document.getElementById("slides").children[0].children[1].clientHeight;
document.getElementById("slides").style.height = newHeight+"px";

获取可见项的高度并相应地更改包含元素的高度。

关于javascript - 根据当前幻灯片高度动态更改 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47577337/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com