开发者

Can I do this with cycle()?

I have this code :

HTML

<div class='myDiv'>1</div>
<div class='myDiv'>2</div>
<div class='myDiv'>3</div>
<div class='myDiv' style='display:none'>4</div>
<div class='myDiv' style='display:none'>5</div>

CSS

.myDiv
{
    width:50px;
    height:50px;
    line-height:50px;
    border:2px solid #000000;
    float:left;
    text-align:center;
    margin-right:10px;
}

jQuery

$('#myButton').click(function () {

});
开发者_运维技巧

and I'd like, when I click on MOVE, to slide to the left the divs myDiv.

So, if the start is 1 2 3, clicking on MOVE it must become 2 3 4, than 3 4 5 and son on.

I'd like to do it with the .cycle() plugins, but I don't know if I can setup a scroll-window with it.

Is it possible? Or I need to implement my own jQuery/JS functions? (with fade/slide effect, will be an hard work).


You can use carousel lite with scroll set to 1 visible set to 3

http://www.gmarwaha.com/jquery/jcarousellite/#doc


WORKING DEMO

$(document).ready(function() {
    var galW = $('#gallery').width(),
        my = $('.mydivs').length, // 3
        mD = $('.myDiv').length,  // 6
        c = 1;

    $('#slider').width(galW * my);

    function a() {
        $('#slider').animate({left: '-='+(galW/3)}, 800);
    }

    $('.btn').click(function() {
        c++;
        if(c===(mD-1)){
            $('#slider').animate({left:0}, 800);
            c=1; return;
        }
        a();
    });
});


Or if you want - with PREV AND NEXT buttons:

WORKING DEMO 2

(You can find the basic tutorial HERE)

Happy coding!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜