3

私のサイトには、コンテンツスライダーに似たセクションがありますが、自動再生ではなく、いくつかのフレーズを循環するためにのみ使用されます。jQueryがおそらくこれを達成するための最良の方法であると確信していますが、画像スライダーを文スライダーに適応させるためのjQueryについての知識は十分ではありません。この効果を達成するにはどうすればよいですか？

4

2 に答える 2

1

このコンテンツのスライド効果を実現するにmaskは、スライドを希望するサイズの div を設定する必要があります。次に、マスク div の背後/内側には、containerすべてのスライドを保持する a があります。次に、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すべてがdivfloat内で隣り合っていることです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 に答える