0

私はこの素晴らしいjQueryスライドショーを見つけました： http ：//slidesjs.com/examples/images-with-captions/

ただし、画像ごとに「キャプション」領域が消えたり表示されたりしないようにしたいと思います。新しい画像に応じてテキストを変更するだけでよいのですが。

これは可能ですか？もしそうなら、どうすればこれを達成できますか？

参考までに、ファイルは次のとおりです。slides.min.jquery.js（http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js）

そして、これが使用されているJavaScriptコードのスニペットです：

animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

ポインタをありがとう。

4

2 に答える 2

2 
animationStart: function(current){
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

サンプルページで作業しました。

|編集| ここでの100％の実例：http：//jsfiddle.net/byvd9/1/

于 2011-11-02T11:55:42.393 に答える
1

画像がカレガンダに移動した後、0で始まる不透明度を使用してキャプションをフェードインさせるように調整しました。フェードトランジション効果を選択すると、不透明度フェードでキャプションが生成されますが、効果が認識されるか、画像を開くためにもっとアトラザドにしたい場合。

<script>
        $(function(){
            $('#slides').slides({
                preload: true,
                //preloadImage: 'img/banner/carregando.gif',
                play: 5000,
                pause: 2500,
                effect: 'fade',
                fadeEasing: "easeOutQuad",
                fadeSpeed: 850,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:0,
                        opacity:0
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0,
                        opacity:1
                    },600);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0,
                        opacity:1
                    },600);
                }
            });
        });
    </script>
于 2012-08-10T19:53:46.850 に答える