更改“标题”的显示方式在此 jQuery 图像幻灯片上添加动画

发布于 2024-12-13 09:39:38 字数 1523 浏览 8 评论 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);
                }

非常感谢您的指点。

原文

I found this great jQuery slideshow:
http://slidesjs.com/examples/images-with-captions/

However, I'd like it so the "caption" area doesn't disappear and reveal for each image. I'd prefer if it just changes the text depending on the new image.

Is this possible, and if so, how do I achieve this?

For reference, here is the file: slides.min.jquery.js ( http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js )

And here is a snippet of the JavaScript code being used:

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

Many thanks for any pointers.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单调的奢华 2024-12-20 09:39:38

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/

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

Worked on the example-page.

|EDIT| 100% working example here: http://jsfiddle.net/byvd9/1/

回复收藏 0 原文

哽咽笑 2024-12-20 09:39:38

在图像进入 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>

I made an adjustment to make the caption fade in effect using the opacity that begins with 0 after the image is going to a carreganda - remembering that if you opt for the fade transition effect he produces the caption in the opacity fade but only ensures that the effect is perceived or if you want it to be more atrazado to open the image.

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

回复收藏 0 原文

~没有更多了~