【问题标题】:Can i create a javascript carousel which contains a flash file as well as static images?我可以创建一个包含 Flash 文件和静态图像的 javascript 轮播吗?
【发布时间】:2011-07-11 12:01:10
【问题描述】:

我想知道是否可以在当前仅包含静态图像的 javascript 轮播中包含 swf。我要做的是在轮播中加入一个 Flash 动画。

我想我有两个主要问题:

  • 是否可以以与图像相同的方式循环浏览 Flash 文件?
  • 如何让 javascript 和 flash 交互,以便 flash 文件知道它何时被选中?

如果有帮助,这是我们正在使用的 js:

$(document).ready(function(){

    var $looper = true;
    var timer;
    var currentSlide = 0;
    var cell = 0;
    var row = 1;

    var hCycles = 0;
    var aCycles = 0;

    //no. of full cycles
    var homecycles = 2;
    var aboutcycles = 2;

    //aboutSlide speed
    var fast = 1200;
    var slow = 4000;

    //hide homepage slides
    $('#slide2').fadeOut(0);
    $('#slide3').fadeOut(0);
    $('#slide4').fadeOut(0);
    $('#slide5').fadeOut(0);
    $('#slide6').fadeOut(0);    

    //hide about slides
    $('.a-slide1').fadeOut(0);
    $('.a-slide2').fadeOut(0);
    $('.a-slide3').fadeOut(0);
    $('.a-slide4').fadeOut(0);
    $('#slide-c1 .a-slide1').fadeIn(1200);

    runSlide(fast);

    function runSlide(x) {
        if ($('body').is('.about')) {
            setTimeout(function() {
                    aboutSlides();
                }, x);
            } else {
            if ($looper) {
                setTimeout(function() {
                    slideShow();    
                }, 4000);
            }
        }       

    }

    function slideShow() {
        if ($looper) {
            if (currentSlide++ < 6 && hCycles < homecycles) {
                $('#slide'+ currentSlide).fadeOut(1200);
                if (currentSlide == 6) {
                    $('#slide1').fadeIn(1200);
                    $('#slide-wrapper li').removeClass('active');
                    $('#btn1').addClass('active');
                    currentSlide = 0;
                    hCycles = hCycles+1;
                } else {
                    $('#slide'+ (currentSlide+1)).fadeIn(1200);
                    $('#slide-wrapper li').removeClass('active');
                    $('#btn'+ (currentSlide+1)).addClass('active');
                }
                runSlide();
            } else {
                $looper = false;
            }
        }
    };

    $('#slide-wrapper li').each(function(index) {
        $('#btn'+(index+1)).click(function(){
            $looper = false;
            $('.slide').fadeOut(1200);
            $('#slide'+ (index+1)).fadeIn(1200);
            $('#slide-wrapper li').removeClass('active');
            $(this).addClass('active');
        });
    });


    function aboutSlides() {
            if (cell++ < 3 && aCycles < aboutcycles) {
                if (cell == 3) {
                    if (row < 3) {
                        row = row+1;    
                    } else {
                        row = 1;
                        aCycles = aCycles+1;
                    }
                    var hide = (row-1);
                    if ((row-1) == 0) {hide = 3}
                    $('#slide-c1 .a-slide'+ hide).fadeOut(1200);
                    $('#slide-c1 .a-slide'+row).fadeIn(1200);
                    cell = 0;
                        runSlide(fast);
                } else {
                    $('#slide-c'+(cell+1)+' .a-slide'+ (row-1)).fadeOut(1200);
                    $('#slide-c'+(cell+1)+' .a-slide'+(row)).fadeIn(1200);
                    if (cell == 2) {
                        runSlide(slow);
                    } else {
                        runSlide(fast);
                    }
                }
            } else {
                // create the final strip
                $('#slide-c3 .a-slide3').fadeOut(1200);
                $('#slide-c3 .a-slide4').fadeIn(1200);  
            }
        }

});

谢谢!

【问题讨论】:

    标签: javascript flash carousel


    【解决方案1】:

    您想在幻灯片中放入任何内容都没有任何问题。只要它是有效的 html,它在幻灯片中就有效。无数的 jquery/motools/etc 插件让你可以指定任何你想要的内容。 flash 有效。
    但是您可能想恢复到另一种揭示方法。从 javascript 设置 swf 的不透明度很复杂,并且会根据浏览器和 Flash 版本产生不同的结果。如果您的 flash 文件是定制的,那么您可以创建一个函数,例如将其淡化为白色,然后从 javascript 调用它。但根据经验,改变 swf 的不透明度是很麻烦的。
    我不知道这是否足以成为答案,我想将其作为评论发布,但没有任何评论按钮。哦,好吧。

    【讨论】:

      猜你喜欢
      • 2014-08-17
      • 1970-01-01
      • 1970-01-01
      • 2013-01-15
      • 1970-01-01
      • 1970-01-01
      • 2012-12-24
      • 2013-08-13
      • 1970-01-01
      相关资源
      最近更新 更多