我可以用cycle()来做到这一点吗？

发布于 2024-12-02 06:24:07 字数 982 浏览 0 评论 0原文

我有 this 代码：

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 () {

});

，当我单击 MOVE 时，我想要，向左滑动 div myDiv。

所以，如果开始是1 2 3，点击MOVE它一定会变成2 3 4，而不是3 4 5代码> 等等。

我想使用 .cycle() 插件来完成此操作，但我不知道是否可以使用它设置 scroll-window 。

是否可以？或者我需要实现我自己的 jQuery/JS 函数？（使用淡入淡出/滑动效果，将是一项艰苦的工作）。

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

草莓味的萝莉 2024-12-09 06:24:07

您可以使用 carousel lite，将 scroll 设置为 1 visible 设置为 3

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

回复收藏 0 原文

挽清梦 2024-12-09 06:24:07

工作演示

$(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();
    });
});

或者，如果您愿意 - 使用 PREV 和 NEXT 按钮：

工作演示 2

（您可以在此处找到基本教程）

快乐编码！

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: