Question

你好:) 为什么这个JavaScript在FF 3.6中不起作用，但在IE7 / 8中这个脚本效果不错？

您可以在此网站上看到问题：http://www.conventioncologne.de/en/social-program/city-tours/adventure-tours/tutanchamun-late-walk-allein-mit-dem-pharao.html

imgslider.js

Array.prototype.search = function(value, strict )
{
    if( typeof value == "undefined" ) {

        return false;
    }
    var retVal = false;
    if( strict ) {
        for( key in this ) {
            if( this[key] === value ) {
                retVal = key;
                break;
            }
        }
    } else {
        for( key in this ) {
            if( this[key] == value ) {
                retVal = key;
                break;
            }
        }
    }
    return retVal;
}

var smallimg = new Array();
var bigimg = new Array();

window.addEvent('load', function(){

var list = $$('div.smalldiv');

list.each(function(element) {
    var imageset = parseInt(element.getAttribute('imageset'));
    var layertop = $('layertop'+imageset);
    var layerbottom = $('layerbottom'+imageset);
    var fx = new Fx.Styles(layertop, {duration:500, transition: Fx.Transitions.linear});

    element.addEvent('mouseenter', function(){
        var newfilename = element.getStyle('background-image');
        newfilename = newfilename.replace(/^url\(/,"");
        newfilename = newfilename.replace(/\)$/,"");
        var posnewfilename = smallimg[imageset].search(newfilename);
        var newbackground = 'url('+bigimg[imageset][posnewfilename]+')';


        var oldbackground = layerbottom.getStyle('background-image');
        old = oldbackground.replace(/^url\(/,"");
        old = old.replace(/\)$/,"");
        var posoldfilename = bigimg[imageset].search(old);
        var smallbackground = 'url('+smallimg[imageset][posoldfilename]+')';
        element.setStyle('background-image',smallbackground);

        layertop.setStyle('opacity','1');
        layertop.setStyle('background-image',oldbackground);
        layerbottom.setStyle('background-image',newbackground);

        fx.start({
            'opacity': '0.0'
        });

    });

    element.addEvent('mouseleave', function(){

    });

});

});

这是HTML脚本：

<script type="text/javascript">
bigimg['23853'] = new Array();
smallimg['23853'] = new Array();
bigimg['23853'][2]="typo3temp/pics/fee2d2a895.jpg";bigimg['23853'][1]="typo3temp/pics/e6921d3e9b.jpg";bigimg['23853'][0]="typo3temp/pics/88b5582780.jpg";
smallimg['23853'][2]="typo3temp/pics/c39223197f.jpg";smallimg['23853'][1]="typo3temp/pics/1bec8c0545.jpg";smallimg['23853'][0]="typo3temp/pics/6b8d3cdc74.jpg";
</script>

和幻灯片的DIV：

<div>
    <div style="position: relative; display: block; float: left;">
        <div style="display: block; float: left; width: 235px; height: 133px;">
            <div id="layerbottom23853" style="position: absolute; top:0px; left: 0px; width: 235px; height: 133px; background: url(typo3temp/pics/88b5582780.jpg)"></div>
            <div id="layertop23853" style="position: absolute; top:0px; left: 0px; width: 235px; height: 133px;"></div>
        </div>
    </div>
</div>
<div id="small" style="display: block; float: left; clear: left; margin: 10px 0 0 0;">
    <div id="small_img1" class="smalldiv" imageset="23853" style="margin: 0 10px 0 0; display: block; float: left; width: 112px; height: 64px; background: url(typo3temp/pics/1bec8c0545.jpg)"></div>
    <div id="small_img2" class="smalldiv" imageset="23853" style="margin: 0 10px 0 0; display: block; float: left; width: 112px; height: 64px; background: url(typo3temp/pics/c39223197f.jpg)"></div>
</div>

Answer 1

我找到了问题。这是修复：

newfilename = newfilename.replace(/^url\(\"/,"");
newfilename = newfilename.replace(/\"\)$/,"");

和

old = oldbackground.replace(/^url\(\"/,"");
old = old.replace(/\"\)$/,"");

JavaScript ImageSlider不起作用

1 个答案: