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行目の余分なスクリプトタグを削除します。

アップデート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：

これで、HTMLの375行目に最新バージョンの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で更新し、17行目http://code.jquery.com/jquery-latest.jsをに変更します。それが動作します。$(window).load(function() {$(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>

ページには 1 つのバージョンの jQuery のみを含めます。

于 2012-07-25T05:13:22.983 に答える