2011-04-05 70 views
3

我已经在Nivo Slider网站上回顾了很多关于此问题的文章。我在javascript中检查了逗号,它看起来很适合我:Nivo Slider不能与IE7配合使用

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     effect:'fade', 
     slices:15, 
     animSpeed:500, 
     pauseTime:4000, 
     startSlide:0, 
     directionNav:false, 
     directionNavHide:false, 
     controlNav:true, 
     controlNavThumbs:false, 
     controlNavThumbsFromRel:false, 
     controlNavThumbsSearch: '.jpg', 
     controlNavThumbsReplace: '_thumb.jpg', 
     keyboardNav:true, 
     pauseOnHover:true, 
     manualAdvance:false, 
     captionOpacity:0.9, 
     beforeChange: function(){}, 
     afterChange: function(){}, 
     slideshowEnd: function(){}, 
     lastSlide: function(){}, 
     afterLoad: function(){} 
    }); 
}); 
</script> 

这是它引用的html。文件夹路径似乎是正确的(毕竟,这是在其他浏览器中工作!):

<div id="slider_wrapper"> 
     <div id="slider"> 
      <img src="/CoVPrototype/images/nivoslider/_img1.jpg" alt="" title="Discover City Parks" /> 
      <img src="/CoVPrototype/images/nivoslider/_img2.jpg" alt="" title="Enjoy Our Beautiful City" /> 
      <img src="/CoVPrototype/images/nivoslider/_img3.jpg" alt="" title="This is an example of a caption" /> 
      <img src="/CoVPrototype/images/nivoslider/_img4.jpg" alt="" title="This is Our Home" /> 
      <img src="/CoVPrototype/images/nivoslider/_img5.jpg" alt="" title="Mild Tempuratures and Natural Beauty" /> 
     </div> 
    </div> 

最后,这里是链接到的javascript:

<script src="/CoVPrototype/js/jquery.nivo.slider.pack.js" type="text/javascript"></script> 

我已经浪费半天尝试解决这个问题!希望这个强大的列表可以发现问题!

思想我想补充的CSS过的情况下,这可能是某种程度上的罪魁祸首:

#slider_wrapper { 
    margin:0 auto; 
    width:740px; 
    height:360px; 
} 
#slider { 
    width:738px; /* Change this to your images width */ 
    height:360px; /* Change this to your images height */ 
    background:url(/CoVPrototype/images/nivoslider/loading.gif) no-repeat 50% 50%; 
    overflow:hidden; 
    margin-top:25px; 
    left:-96px; 
    /*--Top right rounded corner--*/ 
    -moz-border-radius-topright: 5px; 
    -khtml-border-radius-topright: 5px; 
    -webkit-border-top-right-radius: 5px; 
    /*--Top left rounded corner--*/ 
    -moz-border-radius-topleft: 5px; 
    -khtml-border-radius-topleft: 5px; 
    -webkit-border-top-left-radius: 5px; 
    /*--Bottom right rounded corner--*/ 
    -moz-border-radius-bottomright: 5px; 
    -khtml-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    /*--Bottom left rounded corner--*/ 
    -moz-border-radius-bottomleft: 5px; 
    -khtml-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
} 
#slider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
} 

.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:block; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
    /*--Top right rounded corner--*/ 
    -moz-border-radius-topright: 5px; 
    -khtml-border-radius-topright: 5px; 
    -webkit-border-top-right-radius: 5px; 
    /*--Top left rounded corner--*/ 
    -moz-border-radius-topleft: 5px; 
    -khtml-border-radius-topleft: 5px; 
    -webkit-border-top-left-radius: 5px; 
    /*--Bottom right rounded corner--*/ 
    -moz-border-radius-bottomright: 5px; 
    -khtml-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    /*--Bottom left rounded corner--*/ 
    -moz-border-radius-bottomleft: 5px; 
    -khtml-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
} 
/* Caption styles */ 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#F1F0EB; 
    color:#5D79A1; 
    filter: alpha(opacity=90); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 
/* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
    height:32px; 
    /*--Bottom right rounded corner--*/ 
    -moz-border-radius-bottomright: 5px; 
    -khtml-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    /*--Bottom left rounded corner--*/ 
    -moz-border-radius-bottomleft: 5px; 
    -khtml-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
} 
.nivo-caption p { 
    padding:8px 5px 5px 11px; 
    margin:0; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-size:1.1em; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
+0

我从来没有在IE7中工作的问题(和插件支持IE7),你是否收到错误,如果是的话它说什么?或者它只是在默默地失败? – RandomWebGuy 2011-04-05 21:50:53

+0

我看到的全部是加载gif ...永远永远 – 2011-04-05 21:51:49

+0

我认为/ CoVPrototype在你的根目录中? – RandomWebGuy 2011-04-05 21:52:40

回答

8

我曾与NivoSlider和IE7同样的问题,原来它是用“pauseTime”属性的问题。

将它移到jQuery函数的末尾并删除逗号。这样做后,滑块在IE7中工作正常。

原文:

pauseTime: 4500, // How long each slide will show 
pauseOnHover: true, // Stop animation while hovering 

编辑

pauseOnHover: true, // Stop animation while hovering 
pauseTime: 4500 // How long each slide will show 

support forums为Dev7Studios阅读更多。

+0

没有为我工作,请帮助[我](http://stackoverflow.com/questions/15154704/nivo-slider-not-working-in-ie-8) – Shimmy 2013-03-05 01:59:09

1

我基本上找到了Tyce Clee发现的东西 - 只要确保最后一个参数末尾没有逗号。我只是觉得需要发布,因为这适用于任何参数,而不仅仅是暂停时间。