Jquery crossfade light 插件::为什么这段代码在 IE6+7 中不起作用？

Question

为什么this code无法在 IE6+7 中工作？(我的代码)

我检查了 ie 6+7 - 在检查代码在 Firefox + ie8 中工作后不起作用。

这个简单的 jquery light 插件，通过交叉淡入淡出效果切换图片。

   (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

最明显的问题是您不应该将脚本标记放入脚本框中。您将其设置为 onLoad，以便它获取文本框中的所有内容并将其放置在 onLoad 函数内。

因此，请将 jquery 的脚本标记放在 html 框中的 head 中。然后删除其他脚本标签。

我还将 document.ready 函数移至 then end 并让它在 IE7 中“工作” http://jsfiddle.net/pTcXB/ 。尽管旋转有效，但 IE 事件中的图像不会被替换。

我很确定原因在这里:

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

IE7 至少在 url 方面有点棘手。它可能是 jquery 特定的，但我不再编写纯 JavaScript，所以我不确定。如果你像 elem.append('') 添加一个到 dom 的链接，那么 href 将是 http://www.blablabla.bla#something 。知道你可以通过两种方式解决它。添加链接，然后通过 elem.attr('href', '#something') 设置 href，或者您可以拆分哈希并从那里构建 url。

我尝试了第二种方法并让它工作(仅通过IE9模拟器测试了IE7)http://jsfiddle.net/pTcXB/8/