6

CSS3を使用してスライダーを作成し、証言を表示しました。次に、Jqueryを使用してこのスライダーにアニメーションを追加する必要があります。しかし、私はこのスライダーでJqueryを使用する方法がわかりません。そして、これに適したプラグインは何ですか。だから誰でも教えてくれますこのスライダーにアニメーションを追加するにはどうすればよいですか？

どんなアイデアでも大歓迎です。

ありがとうございました。

スライダーコードへのリンクは次のとおりです：jsfiddle.net/XJVYj/82

4

3 に答える 3

1

コードに完全に一致するプラグインを見つけるのは非常に難しいと思います。しかし、jQueryのものをコーディングすることはできます。しかし、2つの質問があります。

  1. CSSをどのくらい変更できますか？それとも、jsがアクティブ化されていなくても機能する必要がありますか？
  2. 今後、3アイテムをご用意しておりますか？または、スライドの数を動的に変更しますか？

// 編集

OK、今は動作します。あまりエレガントではないことは知っていますが、コードをあまり変更したくありませんでした。だから私はあなたのcssセレクターの2つを編集する必要がありました（私は古いものをコメントアウトしました）。また、このソリューションでは、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：よりクリーンなソリューションを得るには、少し考え直す必要があります。1つの方法は、すべてのスライダーをラッパーに配置し、移動する代わりにこのラッパーを移動することです。

于 2013-01-02T08:32:46.620 に答える
0

これらを使用してみてください：

  1. フレックススライダー
  2. Timelinr
  3. SmartGallery
  4. スキッター
于 2013-01-02T08:21:02.350 に答える
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.
        }
    };

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

要素のスライダーを呼び出すときにアニメーションをtrueに設定してみてください（スクリプトコードが提供されていないため、編集できません）。

$('YOUR_SLIDERr').tinycarousel({ animation: true });​
于 2013-01-02T08:25:52.923 に答える