高级JavaScript图像滑块

Advanced javascript image slider

本文关键字：图像 JavaScript 高级      更新时间：2023-09-26

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

我正在为我的一个朋友开发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来加载和速度？

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

第三，如何一个接一个地触发各种事件，同时不中断动画的流程。

第四，在动画背景

图像更改时，如何确保叠加徽标不会消失在动画后面？这是我的主要问题之一。使用淡入和淡出，徽标消失在我的图像后面。

建议？

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

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

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

http://nivo.dev7studios.com/

这看起来很像你要问的。

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

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

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

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

索夫卡，你在我路上帮助了我。谢谢。这就是我需要的。哦，我为此使用了轨道图像滑块。

以下代码对我有用：

(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>
相关文章：