图像旋转在IE或FF中不起作用

时间:2012-03-28 02:45:22

标签: jquery internet-explorer firefox slideshow

我一直在研究这个问题。该脚本确实有效,所有浏览器都遵循流程。 Chrome和Safari显示幻灯片正常。我试图将间隔减慢到1秒以上,分离功能,缩短图像数量,将css更改为相对/绝对,以及众多版本的代码。我已在所有部分中发出警报以检查流程。

测试链接:http://jawilliams.site11.com/ESG/

脚本部分

 <div id="flashHeader">&nbsp;</div>
 <script>
    var currentItem = 0;
    var itemInterval = 33;
    var numberOfItems = 660;
    var imagePath = "JPEG_SEQUENCE/web_4/";
    var holder = $('#flashHeader');
    var flashImages = new Array("MASTER_00000.jpg", "MASTER_00001.jpg", "MASTER_00002.jpg", "MASTER_00003.jpg", "MASTER_00004.jpg", "MASTER_00005.jpg", "MASTER_00006.jpg", "MASTER_00007.jpg", "MASTER_00008.jpg", "MASTER_00009.jpg", "MASTER_00010.jpg", "MASTER_00011.jpg", "MASTER_00012.jpg", "MASTER_00013.jpg", "MASTER_00014.jpg", "MASTER_00015.jpg", "MASTER_00016.jpg", "MASTER_00017.jpg", "MASTER_00018.jpg", "MASTER_00019.jpg", "MASTER_00020.jpg", "MASTER_00021.jpg", "MASTER_00022.jpg", "MASTER_00023.jpg", "MASTER_00024.jpg", "MASTER_00025.jpg", "MASTER_00026.jpg", "MASTER_00027.jpg", "MASTER_00028.jpg", "MASTER_00029.jpg", "MASTER_00030.jpg", "MASTER_00031.jpg", "MASTER_00032.jpg", "MASTER_00033.jpg", "MASTER_00034.jpg", "MASTER_00035.jpg");
    function outputPlayerversion() {
        var playerVersion = swfobject.getFlashPlayerVersion();
        if(playerVersion.major>=19) return false;
        else return true;
    }
    var flashLoop = {
        loop: function() {
            holder.removeClass('loading');
            var srcImg = '';
            var oldImage = 0;
            var firstItem = true;
            var elem = $('#flashHeader > img');
            var infiniteLoop = setInterval(function() {
                if(currentItem === 0) oldImage = numberOfItems-1;
                else oldImage = currentItem-1;
                if(firstItem) firstItem = false;
                else $(elem[oldImage]).css({display: 'none !important', visibility: 'hidden !important'});
                $(elem[currentItem]).css({display: 'block !important', visibility: 'visible !important'});
                if(currentItem === numberOfItems-1) currentItem = 0;
                else currentItem++;
            }, itemInterval);
        },
        preloadImages: function() {
            $('#flashHeader').addClass('loading');
            var srcImg = '';
            var count = 0;
            $(flashImages).each(function() {
                srcImg = imagePath + this;
                var flashImg = $(document.createElement('img'));
                var idTag = 'flashLoopImages' + count;
                flashImg.attr('id', idTag);
                flashImg.attr('src', srcImg);
                flashImg.css({display: 'none'});
                holder.append(flashImg);
                count++;
            });
            this.loop();
        }
    };
    $(document).ready(function() {
        var noFlash = outputPlayerversion();
        if(noFlash) flashLoop.preloadImages();
        else swfobject.embedSWF("ELITE_MASTER.swf", "flashHeader", "960", "300", "9.0.0");
    });
</script>

CSS

 body {position:relative;}
 #flashHeader {background:url('JPEG_SEQUENCE/web_3/MASTER_00102.jpg') center center no-repeat;width:960px;height:300px;position:relative;}
 #flashHeader.loading {background:url('loading.gif') no-repeat center center;}
 #flashHeader IMG {position:absolute;top:0;left:0;width:960px;height:300px;z-index:8;}

1 个答案:

答案 0 :(得分:0)

我找到了问题的所在。我用以下内容更新了两行:

 else $(elem[oldImage]).hide().css({display: 'none !important', visibility: 'hidden !important'});
 $(elem[currentItem]).show().css({display: 'block !important', visibility: 'visible !important'});