2010-08-03 79 views
5

我不能讓jQuery的工作都與IE7。我使用jQuery Cycle插件,但我相信這個問題是與jQuery(而事實上,我是新手)。我試圖用一個橫幅肩,這在Firefox,Safari和IE8的作品。在IE7中,它甚至沒有啓動...它只是顯示了每個格此起彼伏。jQuery的IE7的問題(使用jQuery Cycle插件)

預先感謝您!

http://testing.observerpapers.com/lv

JS

$(document).ready(function() { 
    $('#myslides') 
    .before('<div id="nav">') 
    .cycle({ 
     fx: 'fade', // choose your transition type 
     speedIn: 600, 
     speedOut: 600, 
     timeout: 8000, 
     pause: 0, // so that pauses when user hovers over a slide 
     pager: '#nav', // instructs the plugin to create navigation elements 
    }); // every child element of the container becomes a slide  

    /*ddsmoothmenu.init({ 
     mainmenuid: "smoothmenu1", //menu DIV id 
     orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" 
     classname: 'ddsmoothmenu', //class added to menu's outer DIV 
     //customtheme: ["#1c5a80", "#18374a"], 
     contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] 
    });*/ 
}); 

CSS

#myslides { 
    width: 980px; 
    height: 360px; 
    /*overflow: hidden;*/ 
    z-index: 500; 
    background:none !important; 
} 
#myslides div { 
    /*background:none !important;*/ 
} 
#myslides .textBlock { 
    background: url(../images/home/bg-bb-textblocks.png) top left repeat; 
    width: 360px; 
    padding: 4px; 
    margin-top: 42px; 
    margin-left: 33px; 
} 
#myslides .textBlock div { 
    padding: 17px 8px 10px 18px; 
    border: 1px solid #756e67; 
} 
#myslides h1 { 
    font: normal 24px/1.2 Helvetica, Arial, sans-serif; 
    text-transform: uppercase; 
    color: #fff; 
    margin-bottom: 5px; 
} 
#myslides p { 
    font: normal 14px/1.3 Helvetica, Arial, sans-serif; 
    color: #fff; 
} 
#myslides cite { 
    display: block; 
    width: 500px; 
    font-style: normal; 
    text-transform: uppercase; 
    color: #fff; 
    font-size: 12px; 
    position: absolute; 
    bottom: 6px; 
    left: 20px; 
    z-index: 5000; 
} 
#myslides > div { 
    width: 980px; 
    height: 386px; 
} 
#myslides .billBoard1 { 
    background: url(../images/home/bb-kingston.jpg) top left repeat; 
} 
#myslides .billBoard2 { 
    background: url(../images/home/bb-harbor-breeze.jpg) top left repeat; 
} 
#myslides .billBoard3 { 
    background: url(../images/home/bb-mondrian.jpg) top left repeat; 
} 
.slides { 
    margin-left: 385px; 
    width: 539px; 
} 
.navBG { 
    position: absolute; 
    display: block; 
    z-index: 500; 
    bottom: 0; 
    width: 980px; 
    height: 30px; 
    background: url(../images/home/bg-bb-textblocks.png) top left repeat; 
} 
#nav { 
    position: absolute; 
    z-index: 501; 
    top: 356px; 
    right: 10px; 
    height: 30px; 
    text-align: right; 
} 
#nav a:hover, #nav a.activeSlide { 
    background:none repeat scroll 0 0; 
    font-weight: bold; 
    color: #fff; 
} 
#nav a { 
    background:url("") repeat-x scroll 0 0; 
    color: #d6d2cf; 
    display: inline-block; 
    font: 12px/18px Helvetica, Arial, san-serif; 
    height: 18px; 
    margin: 4px 0 0 5px; 
    padding: 2px 8px; 
    text-align: center; 
    text-decoration: none; 
} 
#nav { 
    font-size: 23px; 
} 
+0

對我來說,它甚至不能在IE8中工作。開發工具顯示以下文本:'LOG:[cycle] termination;太少的幻燈片:0'。 – MvanGeest 2010-08-03 16:03:11

+0

謝謝MvanGeest!我在IE8中修復了它。請你再看一遍。 – alertone 2010-08-03 16:13:30

回答

10

刪除最後一個逗號在週期屬性。 IE不吃那個:

$(document).ready(function() { 
    $('#myslides') 
    .before('<div id="nav">') 
    .cycle({ 
     fx: 'fade', // choose your transition type 
     speedIn: 600, 
     speedOut: 600, 
     timeout: 8000, 
     pause: 0, // so that pauses when user hovers over a slide 
     pager: '#nav' //HERE I REMOVED THE COMMA 
    }); 
+1

despart,你真棒!謝謝! – alertone 2010-08-03 16:16:35

+1

非常感謝!這對IE6和IE7的訣竅對我來說。 – Baxter 2012-04-15 17:55:40