3

我的网站上有一个部分，我希望它类似于内容滑块，但不是自动播放，仅用于循环浏览几个短语。我确信 jQuery 可能是实现这一目标的最佳方式，但我对 jQuery 的了解不足，无法将图像滑块调整为句子滑块。我该怎么做才能达到这个效果？

4

2 回答 2

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/

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

于 2013-02-28T09:41:23.373 回答
1

要实现这种内容滑动效果，您需要设置一个maskdiv，它是您希望幻灯片的大小。然后在掩码 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你在div中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 进行动画处理，而不仅仅是更改其内容或类。

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

于 2013-02-28T10:49:27.500 回答