display certain phrases depending on left/right buttons (content slider for text, not images?) [closed]

问题

I have a section on my site that I would like to be similar to a content slider, but not auto-playing and only used to cycle through a few phrases. I'm sure jQuery is probably the best way to achieve this, but I'm not knowledgeable enough with jQuery to adapt an image slider to a sentence slider. What can I do to achieve this effect?

回答1:

To achieve this content sliding effect you need to setup a mask div that is the size you want your slides to be. Then behind/inside the mask div is a container that holds all your slides - You then move the container around using jQuery and a left position or a negative margin to create this sliding effect.

Setup your HTML like this

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

And your CSS as below - the important bit being that your slider_mask is overflow:hidden and your slides all float next to each other inside the 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;
    }

Finally the jQuery, Similar to @Samuel Liew's example we are going to loop through all the elements in the slide_container but in this case we are going to animate the div instead of just change its content or class.

// 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');

});

Here is a JSFiddle that demonstrates this working - http://jsfiddle.net/2s95M/20/

回答2:

Here's a simple text slider for you to play around with.

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');
    });
});

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

If you want an animated fadein, see http://jsfiddle.net/samliew/rZBaT/14/

来源：https://stackoverflow.com/questions/15082527/display-certain-phrases-depending-on-left-right-buttons-content-slider-for-text

标签

javascript

jquery

slider