JQuery 滑块移动文本

Question

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

    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>

Answer 1

改变CSS

.slideshow

至

#slideshow

您正在将 CSS 规则应用于 class 命名的幻灯片，但您的 HTML 中没有。那是一个ID

JQuery 滑块移动文本

JQuery Slider Moving Text

html

javascript

css

jquery

slider