2011-04-05 67 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發現的東西 - 只要確保最後一個參數末尾沒有逗號。我只是覺得需要發佈,因爲這適用於任何參數,而不僅僅是暫停時間。