Nivo 滑块未在 Internet Explorer (7,8,9) 中加载

Question

我一直在环顾四周并尝试了几种解决我的问题的方法，但似乎没有任何效果。使用 IE 7,8 和 9 时，滑块不会在我的网站上加载。它在 Chrome、Firefox 和 IE10+ 上运行良好。还有另一个 Jquery 脚本和一个 Java 脚本在同一页面上并且工作正常。我会遇到任何兼容性问题吗？

这是html：

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="images/slide-1.png"  />
            <img src="images/slide-2.png"  />

        </div>
    </div>

这是脚本：

<script type="text/javascript">
    $(function() {
    $('#slider').nivoSlider({directionNav: false, controlNav: false, controlNavThumbs: false});});
</script>

CSS：

.nivoSlider {
    position:absolute;
    width:100%;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}

/* 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:6000;
  display:none;
  /*patch IE10*/
  background:white;
  filter: alpha(opacity=0);
  opacity: 0; 
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

更新：似乎当我为另一个插件注释下面的行时，nivo 滑块部分显示在网站上。

<ul id="menu" >
<li><a href="javascript:ajaxpage('home.html', 'contentarea');" class="home"></a></li>
    <li><a href="javascript:ajaxpage('aboutus.html', 'contentarea');" class="aboutus"></a></li>
    <li><a href="javascript:ajaxpage('newcustomer.html', 'contentarea');" class="newcustomer"></a></li>
    <li><a href="javascript:ajaxpage('electronicordering.html', 'contentarea');" class="electronicordering"></a></li>
    <li><a href="javascript:ajaxpage('links.html', 'contentarea');" class="links"></a></li>
    <li><a href="javascript:ajaxpage('links.html', 'contentarea');" class="forms"></a></li>
    <li><a href="javascript:ajaxpage('contactus.html', 'contentarea');" class="contactus"></a></li>
</ul>

所以问题可能与 nivo 滑块和其他菜单脚本有关。

这是它的代码：

<script type="text/javascript">

    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""

    function ajaxpage(url, containerid){
        var page_request = false
        if (window.XMLHttpRequest) // if Mozilla, Safari etc
        page_request = new XMLHttpRequest()
        else if (window.ActiveXObject){ // if IE
            try {
                page_request = new ActiveXObject("Msxml2.XMLHTTP")
            } 
            catch (e){
                try{
                    page_request = new ActiveXObject("Microsoft.XMLHTTP")
                }
                catch (e){}
            }
        }
        else return false
        page_request.onreadystatechange=function(){
            loadpage(page_request, containerid)
        }
        if (bustcachevar) //if bust caching of external page
        bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

        page_request.open('GET', url+bustcacheparameter, true)
        page_request.send(null)
    }

    function loadpage(page_request, containerid){
        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
        document.getElementById(containerid).innerHTML=page_request.responseText
    }

    function loadobjs(){
        if (!document.getElementById)
        return
        for (i=0; i<arguments.length; i++){
            var file=arguments[i]
            var fileref=""
            if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
                if (file.indexOf(".js")!=-1){ //If object is a js file
                    fileref=document.createElement('script')
                    fileref.setAttribute("type","text/javascript");
                    fileref.setAttribute("src", file);
                }
                else if (file.indexOf(".css")!=-1){ //If object is a css file
                    fileref=document.createElement("link")
                    fileref.setAttribute("rel", "stylesheet");
                    fileref.setAttribute("type", "text/css");
                    fileref.setAttribute("href", file);
                }
            }
            if (fileref!=""){
                document.getElementsByTagName("head").item(0).appendChild(fileref)
                loadedobjects+=file+" " //Remember this object as being already added to page
            }
        }
    }

</script>

任何建议或指导将不胜感激！

Answer 1

尝试将其放入 document.ready()

$(document).ready(function(){
    $('#slider').nivoSlider({
            directionNav: false, 
            controlNav: false, 
            controlNavThumbs: false
        });
    });
});