-4

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

我正在为我的一个朋友用 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/" }];

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

出发：

我试图弄清楚如何有一个有效的无限循环堆叠我必须触发的各种事件来为事物设置动画。

首先，我是使用普通的 javascript 还是在负载和速度方面使用 jQuery 更好？

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

第三，如何在不破坏动画流程的情况下触发各种事件。

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

建议？

4

3 回答 3

0

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

上面的行对我来说没有意义。

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

http://nivo.dev7studios.com/

这看起来非常像你问的。

有一个图像滑块的免费代码，它带有链接、文本，几乎所有你需要的东西。

于 2012-06-08T13:08:36.250 回答
0

好的，据您所知，没有人会为您编写它；）我可以向您推荐幻灯片，它可以简单地做到这一点 - 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
};

它是如此简单，你所要做的就是用所有的动画来取笑。试试看。无需为此编写您自己的幻灯片代码。

于 2012-06-08T13:15:40.793 回答
0

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

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>
于 2012-06-26T16:44:51.613 回答