0

这是我的网站。出于某种原因，我的 Nivo 滑块不会显示...它只是坐在那里并加载。为什么，我该如何解决？这是我的CSS：

 #slider {
    position:relative;
    width:618px;
    height:246px;
    background:url(http://www.codtelevision.com/nivo/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    display: none; 
    position:absolute;
    top:0px;
    left:0px;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-30px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://www.codtelevision.com/nivo/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://www.codtelevision.com/nivo/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}

.clear {
    clear:both;
}

如果这没有帮助，请查看我的网站或告诉我要粘贴什么代码。谢谢！

4

2 回答 2

1

去掉 html 中第 15 行多余的 script 标签。

更新1：

更改$('#slider').nivoSlider();为$('#slider').nivoSlider({如下所示。

$(document).ready(function() {
    $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:600, //Slide transition speed
        pauseTime:8000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:false, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
    });
});

更新 2：

好的，所以您在 375 行的 html 中包含了最新版本的 jQuery。请在此行之后粘贴您的 Nivoslider。那就是在第 375 行之后移动以下脚本，比如在</body>标记之前。

<script type="text/javascript" src="http://www.codtelevision.com/nivo/js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">

   $(document).ready(function() {
    $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:600, //Slide transition speed
        pauseTime:8000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:false, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
    });
});

更新 3：

或者，您可以在开头包含最新版本并消除冲突。因此，将第 13 行中的 jquery 更新为最新的 src http://code.jquery.com/jquery-latest.js，并将$(window).load(function() {第 17 行中的$(document).ready(function() {. 它会起作用的。

于 2012-07-25T05:11:27.057 回答
1

好的，第一件事。查看您的代码后，顶部有一个未关闭且不包含任何内容的脚本标签。去掉它。

<script type="text/javascript">
<script type="text/javascript">

$(document).ready(function() {
$('#slider').nivoSlider();
    effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,

编辑：jQuery 冲突。

在顶部你有

<script type="text/javascript" src="http://www.codtelevision.com/nivo/js/jquery-1.4.3.min.js"></script>

在底部你有

<script src="http://code.jquery.com/jquery-latest.js"></script>

页面上只包含一个版本的 jQuery。

于 2012-07-25T05:13:22.983 回答