Question

我发现了这个很棒的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);
                }

非常感谢任何指示。

Answer 1

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

在示例页面上工作。

| EDIT |这里有100％的工作示例：http://jsfiddle.net/byvd9/1/

Answer 2

我做了一个调整，使图像转到carreganda后使用以0开头的不透明度使字幕淡入效果 - 记住如果你选择淡入淡出过渡效果，他会在不透明度渐变中产生标题，但仅限于确保效果被感知，或者如果你想要更多atrazado来打开图像。

<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>

更改“jQuery图像幻灯片”中“标题”动画的方式

2 个答案: