顯示某些短語（文本內容滑塊，而不是圖像？）

Question

我有我的網站上一節，我想是類似於內容滑塊，但沒有自動播放，只用於循環幾個短語。我相信jQuery可能是實現這一目標的最佳方式，但我對jQuery不夠熟悉，無法將圖像滑塊調整爲語句滑塊。我能做些什麼來達到這個效果？

Answer 1

達到你需要把這個內容滑動效果設置一個mask div是你想要幻燈片的大小。然後，在mask div的後面/裏面是一個容納所有幻燈片的container - 然後，您可以使用jQuery和左側位置或負側邊距移動容器以創建此滑動效果。

設置你的HTML這樣

<div id="slider_mask"> 

    <div class="slide_container"> 

     <div class="slide"><p>Slide One</p></div> 
     <div class="slide"><p>Slide Two</p></div> 
     <div class="slide"><p>Slide Three</p></div> 
     <div class="slide"><p>Slide Four</p></div> 
     <div class="slide"><p>Slide Five</p></div> 

    </div> 

    <div class="left_button"><</div> 
    <div class="right_button">></div> 

</div> 

隨着下方的CSS - 最重要的一點是，你的slider_mask是overflow:hidden和你slides所有float彼此相鄰的slider_container DIV中

#slider_mask { 
    width:300px; 
    height:200px; 
    overflow:hidden; 
    border:1px solid #000; 
    position:relative; 
} 

    #slider_mask .slide_container { 
     height:200px; 
     position:relative; 
    } 

    #slider_mask .slide { 
     width:300px; 
     height:200px; 
     float:left; 
     text-align:center; 
     background-color:#f1f1f1; 
    } 

    #slider_mask .left_button { 
     position:absolute; 
     padding:5px; 
     left:0px; 
     top:90px; 
    } 

    #slider_mask .right_button { 
     position:absolute; 
     padding:5px; 
     right:0px; 
     top:90px; 
    } 

最後是jQuery，與@Samuel Liew的例子類似，我們將循環遍歷slide_container中的所有元素，但在這種情況下，我們是goi ng動畫的div而不是隻改變它的內容或類。

// Setup Variables 
var slides = $('#slider_mask .slide_container').children(); 
var total_slides = slides.length; 
var slide_width = $('#slider_mask').width(); 
var current_slide = 0; 

// Set the width of the slide_container to total width of all slides 
$('#slider_mask .slide_container').width(slide_width*total_slides); 

// Handle Right Arrow Click 
$('#slider_mask .right_button').on('click', function() { 

    current_slide++; 

    if(current_slide == total_slides){ current_slide = 0; } 

    var negative_margin_required = current_slide*slide_width; 
    $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast'); 


}); 

// Handle Left Arrow Click 
$('#slider_mask .left_button').on('click', function() { 

    current_slide--; 

    if(current_slide < 0){ current_slide = total_slides-1; } 

    var negative_margin_required = current_slide*slide_width; 
    $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast'); 

}); 

下面是一個說明這個工作一個的jsfiddle - http://jsfiddle.net/2s95M/20/

Answer 2

這裏有一個簡單的文本滑塊供你玩弄。

HTML：

<div id="textSlider"> 
    <p>This is the first test sentence</p> 
    <p>This is a another test sentence</p> 
    <p>One more test sentence</p> 
    <p>The final test sentence</p> 
</div> 

<div id="textSlider-buttons"> 
    <a href="#" class='prev'>Prev</a> 
    <a href="#" class='next'>Next</a> 
</div> 

JS：

$(function() { 
    var slides = $('#textSlider').children(); 
    var currentSlide = 0; 

    // show first item 
    slides.eq(0).addClass('active'); 

    // on button click 
    $('#textSlider-buttons').on('click', 'a', function() { 

     // increment or decrement slide number 
     $(this).attr('class') == 'prev' ? currentSlide-- : currentSlide++; 

     // if over number of slides, or less than zero, make adjustments 
     if(currentSlide >= slides.length) currentSlide = 0; 
     if(currentSlide < 0) currentSlide = slides.length-1; 

     // display current slide 
     slides.removeClass('active').eq(currentSlide).addClass('active'); 
    }); 
}); 

見http://jsfiddle.net/samliew/rZBaT/6/

如果你想要一個淡入動畫，看http://jsfiddle.net/samliew/rZBaT/14/