Question

我使用CSS3创建了一个滑块来显示我的推荐。现在我需要使用Jquery为这个滑块添加一些动画。但我不知道如何使用这个滑块的Jquery ..什么是适合的插件。所以任何人都可以告诉我如何向这个滑块添加动画？

非常感谢任何想法。

谢谢。

以下是滑块代码的链接：jsfiddle.net/XJVYj/82

Answer 1

我认为很难找到与您的代码完全匹配的插件。但我可以为你编写jQuery的东西。但接下来我会有两个问题。

我可以更改多少CSS？或者它是否仍然可以在没有激活js的情况下工作？
您将来会继续使用3件物品吗？或者您想动态更改幻灯片的数量吗？

//编辑

好的，现在有效。我知道它不是很优雅，但我不想改变你的代码太多。所以我只需编辑你的两个css选择器（我评论了旧的选择器）。您还需要注意，使用此解决方案，当禁用javascript时，旧方法仍然有效。 jQuery代码遵循......

$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});

$("input#first").click(function(){
    $("div.one").animate({left:0},600);
    $("div.two").animate({left:300},600);
    $("div.three").animate({left:600},600);
});

$("input#second").click(function(){
    $("div.one").animate({left:-300},600);
    $("div.two").animate({left:0},600);
    $("div.three").animate({left:300},600);
});

$("input#third").click(function(){
    $("div.one").animate({left:-600},600);
    $("div.two").animate({left:-300},600);
    $("div.three").animate({left:0},600);
});

jsfiddle.net/mYhEV/2/

希望它有所帮助。

PS：对于更清洁的解决方案，您需要重新考虑一下。一种方法是将所有滑块放在一个包装器中，然后只移动这个包装器而不是移动。

Answer 2

尝试使用这些：

Answer 3

脚本文件中确实存在文档，其中包含您可以使用的选项：

$.tiny.carousel = {
        options: {  
            start: 1, // where should the carousel start?
            display: 1, // how many blocks do you want to move at 1 time?
            axis: 'x', // vertical or horizontal scroller? ( x || y ).
            controls: true, // show left and right navigation buttons.
            pager: false, // is there a page number navigation present?
            interval: false, // move to another block on intervals.
            intervaltime: 3000, // interval time in milliseconds.
            rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
            animation: true, // false is instant, true is animate.
            duration: 1000, // how fast must the animation move in ms?
            callback: null // function that executes after every move.
        }
    };

安全地：animation: true, // false is instant, true is animate。

尝试在元素上调用滑块时将动画设置为true（您没有提供脚本代码，因此我无法为您编辑它。）

$('YOUR_SLIDERr').tinycarousel({ animation: true });

向此推荐滑块添加动画

3 个答案: