Nivo Slider无法在Internet Explorer中加载(7,8,9)

时间:2014-05-05 22:26:00

标签: javascript jquery html nivo-slider

我一直在环顾四周,尝试了几个解决方案来解决我的问题,似乎没有任何工作。使用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>

非常感谢任何建议或指导!

1 个答案:

答案 0 :(得分:0)

尝试将其放入document.ready()

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