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滑塊移動文本

回答

相關問題