jQuery IE7问题(使用jQuery Cycle插件) [英] jQuery IE7 problem (using jQuery Cycle plugin)

问题描述

我无法使jQuery与IE7一起使用.我使用的是jQuery Cycle插件，但我认为这个问题与jQuery有关(并且我是新手).我正在尝试使用横幅旋转器，该横幅旋转器可在Firefox，Safari和IE8上使用.在IE7上，它甚至没有激活...它只是一个接一个地显示每个div.

I can't get jQuery working at all with IE7. I'm using the jQuery Cycle plugin, but I believe this problem is with jQuery (and the fact that I'm am a newbie). I'm trying to use an banner rotator, which works on Firefox, Safari and IE8. On IE7, it is not even activating... it just shows each div one after another.

提前谢谢！

示例 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;
}

推荐答案

删除cycle属性中的最后一个逗号. IE不会那样吃:

Remove the last comma in the cycle attributes. IE doesn't eat that:

$(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
    });

这篇关于jQuery IE7问题(使用jQuery Cycle插件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！