Question

我一直在谷歌上搜索一段时间，并意识到我需要帮助。

我正在为我的一个朋友用PHP开发一些东西，但是他想在他的网站上编写一个非常难以编程（对我而言）的图像滑块。我是荷兰人，我要告诉你的例子是荷兰网站：http://www.iboma.com/index.asp。我正在尝试使用javascript / jQuery制作类似的动画。

仅显示样本木材，我需要淡入图像和相应的链接。该文可能是额外的。这不是必需的。

标准滑块不够好所以我需要自定义代码。没有花哨的动画，交叉渐变会是理想的。在图像消失后，我需要在覆盖背景图像时淡化图像+链接，同时保持示例网站上也显示重叠徽标。

我想通过JSON数组从PHP提供图像滑块图像，或者在网站上预先加载（可能是搜索引擎更友好）。

var photos = [  { image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.stackoverflow.com/" }, 
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.google.com/" },
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.yahoo.com/" }];

你们可以帮我开发这样的动画吗？

开始：

我正在试图弄清楚如何使用一个有效的infinte循环来叠加我必须触发的各种事件来动画。

首先，我是否使用普通的javascript或者我最好使用jQuery来加载和加速？

其次，无限循环的这种代码的良好实现是什么？

第三，如何在彼此之后触发各种事件而不会破坏动画的流程。

第四，动画背景图像改变时如何确保覆盖的徽标不会在动画后面消失？这是我的主要问题之一。使用fadeIn和fadeOut，徽标会在我的图像后面消失。

建议？

Answer 1

我一直在谷歌上搜索一段时间，我开始意识到我真的需要一些帮助。

以上这条线对我来说没有意义。

我在“图片滑块”中输入了google，这是第一个结果。

http://nivo.dev7studios.com/

这看起来非常像你在问什么。

图片滑块的免费代码，包含链接，文本，以及您需要的所有内容。

Answer 2

好的，据你所知，没有人会为你写的;）我可以向你推荐幻灯片，只能做到这一点 - http://jquery.malsup.com/cycle/

$('#slideshow').cycle({ 
   fx: 'fade', 
   after:   onAfter 
});

function onAfter(curr, next, opts, fwd) { 
     //here you make animation with text and small image
};

这很简单，所有你需要做的就是取笑所有的动画。试试吧。您无需为此创建自己的幻灯片代码。

Answer 3

终于得到了我需要的东西。

Sófka你帮助了我。谢谢你。这就是我需要的。哦，我使用了Orbit图像滑块。

以下代码适用于我：

(function($) {
        $(document).ready(function() {
            $('#featured').orbit({
                animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
                animationSpeed: 500,                // how fast animtions are
                timer: true,                        // true or false to have the timer
                advanceSpeed: 6000,                 // if timer is enabled, time between transitions
                pauseOnHover: true,                 // if you hover pauses the slider
                startClockOnMouseOut: true,         // if clock should start on MouseOut
                startClockOnMouseOutAfter: 0,       // how long after MouseOut should the timer start again
                directionalNav: false,              // manual advancing directional navs
                captions: false,                    // do you want captions?
                captionAnimation: 'fade',           // fade, slideOpen, none
                captionAnimationSpeed: 800,         // if so how quickly should they animate in
                bullets: false,                     // true or false to activate the bullet navigation
                bulletThumbs: false,                // thumbnails for the bullets
                bulletThumbLocation: '',            // location from this file where thumbs will be
                beforeSlideChange: function() {
                    $('#featured a, #featured span').fadeOut(400, function() {
                        $('#featured a, #featured span').remove();
                    });

                    $('#featured img').each(function(index) {
                        if ($('#featured img').eq(index).css("z-index") == 3) {
                            var className = $('#featured img').eq(index).attr("class");
                            $('#featured img')
                                .eq($('#featured img').index(this))
                                .after($('#featured-images .' + className)
                                    .clone()
                                    .css("z-index","4")
                                );
                            $('#featured a.' + className)
                                .css("top",$("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 50)
                                .css("left",$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 50)
                                .fadeIn(1000, function() {
                                    $('#featured a.' + className + ' img').fadeIn(1500);
                                    $('#featured img')
                                        .eq($('#featured img').index(this))
                                        .after($('#featured-text .' + className)
                                            .clone()
                                            .css({"z-index":"4",
                                            "top":"0px",
                                            "display":"block",
                                            "opacity":0,
                                            "position":"absolute",
                                            "left":$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 70 - $('#featured-text .' + className).width()})
                                        );
                                    $('#featured span.' + className).animate({
                                        opacity: 1,
                                        top: $("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 25
                                    }, 1000);
                                });

                        }
                    });
                }
            });
        });
    }(jQuery));

需要在代码库中添加一些事件挂钩，但这并不太难。

HTML：

<div id="featured">
                <img src="http://localhost/foo/images/bar.png" class="image-1" width="924" height="317" alt="" />
                <img src="http://img265.imageshack.us/img265/3355/62320763.jpg" class="image-2" width="924" height="317" alt="" />
                <img src="http://img411.imageshack.us/img411/1237/75707805.jpg" class="image-3" width="924" height="317" alt="" />
            </div>
            <div id="featured-images">
                <a href="" class="image-1" style="width:100px;height:50px;border:1px solid #FFF;"><img src="http://localhost/foo/images/foobar.png" width="100" height="50" alt="" style="display:none" /></a>
            </div>
            <div id="featured-text">
                <span class="image-1" style="display:none;font-size:30px;color:#FFF;">Dit is een test</span>
            </div>

高级JavaScript图像滑块

3 个答案: