gpt4 book ai didi

javascript - JQuery slider 移动文本

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

我正在尝试在我的网站上使用这个 JQuery slider 。幻灯片工作正常,就像他们应该的那样,但是我遇到的问题是幻灯片之间的间隙,那里没有图片,下面的所有文本都跳到页面顶部,然后当下一张幻灯片时显示时,它显然将其向下推,有没有办法让文本始终保持在同一个位置,并且不会被幻灯片上下拖动?

    function startSlides(start, end, delay) {
setTimeout(slideshow(start,start,end, delay), delay);
}
function slideshow(frame, start, end, delay) {
return (function() {
$('#slideshow' + frame).fadeOut();
if (frame == end) { frame = start; } else { frame += 1; }
setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
setTimeout(slideshow(frame, start, end, delay), delay + 850);
})
}
// usage: startSlides(first frame, end frame, delay time);
startSlides(1, 3, 5000);
.slideshow{
height:359px;
width:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slideshow">

<div id="slideshow1" class="slide">
<div><img src="http://wallpaperrich.com/wp-content/uploads/2014/09/3d-animated-frog-image.jpg" alt="Slide 1"></div>
</div>
<div id="slideshow2" class="slide" style="display: none">
<div><img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="Slide 1"></div>
</div>
<div id="slideshow3" class="slide" style="display: none">
<div><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Slide 1"></div>
</div>
</div>


<p>Bacon ipsum dolor amet tri-tip ribeye beef ribs chuck. Tail venison shank, cupim tongue pork loin beef ribs drumstick kevin ground round fatback. Boudin chicken andouille ham spare ribs fatback beef bresaola landjaeger frankfurter tongue. Hamburger fatback brisket flank. Pork loin kielbasa biltong tail pork chop pancetta bacon cow rump. Prosciutto pork loin cupim t-bone tongue shankle kielbasa, pastrami filet mignon ham jowl beef pork chop rump drumstick.</p>

最佳答案

更改 CSS

.slideshow

#slideshow

您将 CSS 规则应用于名为 slideshow 的类,但您的 HTML 中没有。那是一个ID

关于javascript - JQuery slider 移动文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28065478/

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