Question

这是我的website。由于某种原因，我的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;
}

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

Answer 1

删除html中第15行的额外脚本标记。

更新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：

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

Answer 2

首先要做的事情。看了你的代码后，顶部有一个脚本标签，它没有关闭，也没有包含任何内容。删除它。

<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。

Nivo滑块加载问题？

2 个答案: