JQuery滑块移动文本

我想在我的网站上使用这个JQuery滑块。幻灯片工作正常，就像他们应该一样，但是我遇到的问题是幻灯片之间的空白处，那里没有图片，下面的所有文本都跳到页面顶部，然后当下一张幻灯片显示时，它显然将其推回，有没有办法让文本始终保持在同一个位置，并且不会因幻灯片显示而上下拖动？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{ 
 
\t height:359px; 
 
\t width:1000px; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
\t <div id="slideshow"> 
 
\t \t \t \t \t 
 
\t \t <div id="slideshow1" class="slide"> 
 
\t \t \t <div><img src="http://wallpaperrich.com/wp-content/uploads/2014/09/3d-animated-frog-image.jpg" alt="Slide 1"></div> 
 
\t \t \t </div> 
 
\t \t \t <div id="slideshow2" class="slide" style="display: none"> 
 
\t \t \t \t <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> 
 
\t \t \t </div> 
 
\t \t \t <div id="slideshow3" class="slide" style="display: none"> 
 
\t \t \t \t <div><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Slide 1"></div> 
 
\t \t \t </div> 
 
\t </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>

来源

2015-01-21 Toby Cannon

更改CSS

.slideshow

到

#slideshow

你申请的CSS规则一类名为幻灯片，但不是在你的HTML 。这是一个ID

来源

2015-01-21 11:05:32 pumpkinzzz

啊，感觉像一个正确的布偶！谢谢指出， – 2015-01-21 11:09:04

没问题的队友。如果没关系，你可以检查这是否正确答案 – pumpkinzzz 2015-01-21 11:28:37

JQuery滑块移动文本

回答

相关问题