2011-01-21 20 views
1

こんにちは:) このJavaScriptはFF 3.6では動作しませんが、IE7/8のこのスクリプトではうまくいかないのはなぜですか?JavaScript ImageSliderが動作しない

あなたはこのサイト上の問題を見ることができます: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> 
+0

addEvent-それはありません、これは動作しませんaddEventListenerを –

+0

です。 –

+0

IE8.0とFFでエラーが「未定義」になっています。最初にヌルでないことを確認してください&未定義ではありません&もう一度やり直してください。 –

答えて

0

私は問題を発見しました。ここで修正がある:

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

FFの
old = oldbackground.replace(/^url\(\"/,""); 
old = old.replace(/\"\)$/,""); 
関連する問題