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

我进行了调整，以在图像进入 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>
于 2012-08-10T19:53:46.850 回答