向此推荐滑块添加动画

Question

我使用CSS3创建了滑块以显示我的推荐书。现在我需要使用Jquery为此滑块添加一些动画。但我没有任何想法如何用这个滑块使用Jquery ..什么是适合这个插件。所以任何人都可以告诉我如何将动画添加到此滑块？

任何想法非常感谢。

谢谢。

这里是一个滑块代码的链接：jsfiddle.net/XJVYj/82

Answer 1

我认为这将是非常困难的找到一个完全符合你的代码的插件。但我可以为你编写jQuery的东西。但是，我会有两个问题。

1. 我可以更改多少CSS？还是应该它也仍然工作没有js激活？
2. 你将来会有多少3件物品吗？或者您是否想要动态更改幻灯片的数量？

//编辑

OK现在它工作。我知道它不是很优雅，但我不想更改太多的代码。所以我只需要编辑你的两个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

尝试使用这些：

1. Flex Slider
2. Timelinr
3. SmartGallery
4. Skitter

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. 
     } 
    }; 

Secifcally：animation: true, // false is instant, true is animate。

尝试，当你调用滑块的元件上的动画设置为true（你没有提供的脚本代码，所以我不能为你编辑。）

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