我已经使用 CSS3 创建了一个滑块来显示我的推荐。现在我需要使用 Jquery 向这个滑块添加一些动画。但我不知道如何在这个滑块上使用 Jquery .. 什么是合适的插件。所以任何人都可以告诉我如何向这个滑块添加动画？
任何想法都非常感谢。
谢谢你。
这是滑块代码的链接：jsfiddle.net/XJVYj/82
问问题
2005 次
3 回答
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);
});
希望能帮助到你。
PS：对于更清洁的解决方案，您必须重新考虑一下。一种方法是将所有滑块放在一个包装器中，然后只移动这个包装器而不是移动。
于 2013-01-02T08:32:46.620 回答
0
脚本文件中确实有文档，其中包含您可以使用的选项：
$.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 });
于 2013-01-02T08:25:52.923 回答