Question

我的网站上有一个部分，我希望与内容滑块类似，但不会自动播放，只用于循环浏览几个短语。我敢肯定jQuery可能是实现这一目标的最好方法，但是我对jQuery的知识不足以使图像滑块适应句子滑块。我该怎么做才能达到这个效果？

Answer 1

这是一个简单的文本滑块供您玩。

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/

如果您想要动画fadein，请参阅http://jsfiddle.net/samliew/rZBaT/14/

Answer 2

要实现此内容滑动效果，您需要设置一个与幻灯片大小相同的mask div。然后掩码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内彼此相邻格

#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中的所有元素，但在这种情况下，我们将动画div而不仅仅是更改其内容或类。 / p>

// 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/

根据左/右按钮显示某些短语（文本的内容滑块，而不是图像？）

2 个答案: