Question

为什么this code无法在IE6 + 7中运行？（我的代码）

我检查了ie 6 + 7 - 在我检查代码在Firefox + 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

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

所以将jquery的脚本标记放在html框的头部。然后删除其他脚本标记。

我还将你的document.ready函数移到了最后，并让它在IE7 http://jsfiddle.net/pTcXB/中“正常工作”。通过旋转工作，图像不会在IE事件中被替换。

我很确定原因在这里：

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

IE7 atleast在url方面有点棘手。它可能是jquery特定的，但我再也不会写简单的javascript了，所以我不确定。如果您添加一个像elem.append（''）那样的dom链接，那么href将是http://www.blablabla.bla#something。知道你可以用两种方式解决它。添加链接然后通过elem.attr（'href'，'＃something'）设置href，或者你可以拆分哈希并从那里建立网址。

我尝试了第二种方法并使其正常工作（仅通过IE9模拟器测试IE7）http://jsfiddle.net/pTcXB/8/

Answer 2

这是IE实现href属性的方式的问题。它不是返回你想要的实际href值，而是像＃slide3那样，它返回绝对路径，如http://mysite.com/#slide3。解决这个问题的简单方法是拆分字符串，然后只提取所需的实际锚标记，这适用于所有浏览器。以下是我将您的旋转javascript函数更改为：

                 var rotate = function () {

                     activeBefore.removeClass('active'); 
                     active.addClass('active');
                     var href = activeBefore.find('a').attr('href');
                     href = href.split('#');
                     $('#' + href[href.length-1]).fadeOut('slow',function(){
                     $(this).css('display','none');
                 });

                    href = active.find('a').attr('href');
                    href = href.split('#');
                    $('#' + href[href.length -1]).fadeIn('normal',function(){
                     //$(this).css('display','block');
                 });

                 };

这是jsfiddle：http://jsfiddle.net/eLBPE/3/

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

2 个答案: