Jquery crossfade light plugin :: 왜이 코드는 IE6 + 7에서 작동하지 않습니까?

Question

왜 IE6 + 7에서 작동하지 this code (내 코드)

즉 6 + 7에 내가 확인 - 나는 코드가 파이어 폭스 + IE8에서 작동하는지 확인 한 후 작동하지 않습니다.

크로스 페이드 효과로 사진을 전환하는 간단한 jquery 라이트 플러그인입니다.

(function($){ 

     $(document).ready(function() { 
     $('.sliderBox').CrossFadeSlider(); 
     }); 


    $.fn. CrossFadeSlider=function(options){ 
     //default settinfs 
     var settings={ 
      pagingWrapperClass: 'controls', 
      slideWrapperClass:'slider', 
      pagingWrapperElement:$('.controls'), 
      slideWrapperElement:$('.slider'), 
      slideTag: "li", 
      pagingTag:"li", 
      width:'790px', 
      height:'286px', 
      slideInterval:4000,//Timer speed in milliseconds (3 seconds) 
      autoplay:true 
     }; 

     $.extend(settings, options); 
     //set slide size 
     this.css('width',settings.width).css('height',settings.height); 
     //Add Default classes or it can be dome manually in code. 
     settings.pagingWrapperElement.addClass(settings.pagingWrapperClass); 
     settings.slideWrapperElement.addClass(settings.slideWrapperClass); 
     //create paging 
     var strPaging=''; 
     settings.slideWrapperElement.children().each(
      function(i,el){ 
       strPaging=strPaging+'<'+settings.pagingTag+'><a href="#'+$(this).attr("id")+'">'+(i+1)+'</a></'+settings.pagingTag+'>'; 
      } 
     ); 

     settings.pagingWrapperElement.append(strPaging); 

     //Set Default State of paging 
     $("."+settings.pagingWrapperClass).show(); 
     $("."+settings.pagingWrapperClass+" "+settings.pagingTag+":first").addClass("active"); 
     var active = $('.'+settings.pagingWrapperClass+" "+settings.pagingTag+'.active'); 
     var activeBefore = active; 
     //Set Default State of slides 
     $("."+settings.slideWrapperClass+" "+settings.slideTag).css('display','none'); 
     $("."+settings.slideWrapperClass+" "+settings.slideTag+":first").css('display','block'); 
     $("."+settings.slideWrapperClass+" "+settings.slideTag).css("background-color", "transparent"); 
     $("."+settings.slideWrapperClass+" "+settings.slideTag+" img").css("background-color", "transparent"); 

     //Paging + Slider Function 
     var rotate = function(){ 

      activeBefore.removeClass('active'); //Remove all active class 
      active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

      $(activeBefore.find('a').attr('href')).fadeOut('slow',function(){ 
       $(this).css('display','none'); 
      }); 

      $(active.find('a').attr('href')).fadeIn('normal',function(){ 
       //$(this).css('display','block'); 
      }); 
     }; 

     //Rotation + Timing Event 
     var rotateSwitch = function(){ 
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
       activeBefore=$('.'+settings.pagingWrapperClass+" "+settings.pagingTag+'.active'); 
       active = activeBefore.next(); 
       if (active.length === 0) { //If paging reaches the end... 
        active = $('.'+settings.pagingWrapperClass+" "+settings.pagingTag+':first'); //go back to first 
       } 
       rotate(); //Trigger the paging and slider function 
      }, settings.slideInterval); //Timer speed in milliseconds (3 seconds) 
     }; 

     rotateSwitch(); //Run function on launch 

     //On Hover 
     $("."+settings.slideWrapperClass+" "+settings.slideTag).hover(function() { 
      clearInterval(play); //Stop the rotation 
     }, function() { 
      rotateSwitch(); //Resume rotation 
     }); 

     //On Click 
     $("."+settings.pagingWrapperClass+" "+settings.pagingTag).click(function() { 
      active = $(this); //Activate the clicked paging 
      activeBefore=$("."+settings.pagingWrapperClass+" "+settings.pagingTag+'.active'); 
      //not doing nothing if active button pressed. 
      if(active.get(0)===activeBefore.get(0)){return false;} 
      //Reset Timer 
      clearInterval(play); //Stop the rotation 
      rotate(); //Trigger rotation immediately 
      rotateSwitch(); // Resume rotation 
      return false; //Prevent browser jump to link anchor 
     }); 
    }; 
    })(jQuery); 

Answer 1

합니다 (IE9 에뮬레이터를 통해서만 테스트 IE7을) 작업을 얻었다. 대신 # slide3과 같은 원하는 실제 href 값을 반환하는 대신 http://mysite.com/#slide3과 같은 절대 경로를 반환합니다. 이것을 처리하는 쉬운 방법은 문자열을 분할하고 원하는 모든 실제 브라우저에서 사용할 수있는 실제 앵커 태그를 추출하는 것입니다. 중 IE9에서 작동하도록

Answer 2

가장 명백한 문제는 스크립트 상자에 스크립트 태그를 넣으면 안된다는 것입니다. onLoad로 설정하면 텍스트 상자의 모든 내용을 가져 와서 onLoad 함수 내부에 저장합니다.

그래서 jquery 용 스크립트 태그를 html 상자의 헤드에 배치하십시오. 그런 다음 다른 스크립트 태그를 제거하십시오.

또한 document.ready 함수를 이동하여 끝내고 IE7에서 "작업중"이되었습니다 http://jsfiddle.net/pTcXB/. 회전 작업을하더라도 IE 이벤트에서는 이미지가 대체되지 않습니다.

나는 이유는 여기에있다 확신 :이 URL의에 올 때

$(activeBefore.find('a').attr('href')).fadeOut('slow',function(){ 
    $(this).css('display','none'); 
}); 

IE7이이어야 조금 까다 롭습니다. 그것은 특정 jquery 수도 있지만 일반 자바 스크립트를 더 이상 쓸 수 없으므로 확실하지 않습니다. elem.append ('')와 같은 dom에 대한 링크를 추가하면 href는 http://www.blablabla.bla#something이됩니다. 두 가지 방법으로 해결할 수 있음을 알고 있습니다. 링크를 추가 한 다음 elem.attr ('href', '#something')을 사용하여 href를 설정하거나 해시를 분할하고 거기에서 URL을 작성하십시오.

나는 두 번째 방법을 시도하고 이것은 IE는 href 속성을 구현하는 방법에 문제가 http://jsfiddle.net/pTcXB/8/