0

当サイトにslides.jsを実装したところ、どういうわけか実際のスライドアニメーションが動かなくなってしまったようです。スライド/画像は変更されますが、付随するアニメーションはありません。「フェード」アニメーションを指定すると機能しますが、残念ながら「スライド」を指定しても同じ効果はありません。私はjquery 1.8.0を使用していますが、それが何か関係があるかどうかはわかりませんが、古いバージョンのjqueryでも同じ問題があるようです。

これが私が意味することの例です: http://jsfiddle.net/x45fE/1/

フィドルから、Html：

<script type="text/javascript" src="http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js"></script>

<div id="bannerSlider">
    <div class="slides_container">
            <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200/ffffff/">
                    </a>
            </div>
                    <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200x200">
                    </a>
            </div>

                    <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200/ffffff/">
                    </a>
            </div>

                    <div class="slide">
                    <a href="#">
                        <img src="//placehold.it/200x200">
                    </a>
            </div>

    </div>                    
</div>test

CSS:

#ribbon {
    position:absolute;
    top:-3px;
    left:-15px;
    z-index:500;
}

#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}

/*
    Slideshow
*/

#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width:570px;
    overflow:hidden;
    position:relative;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container div.slide {
    /*width:570px;*/
    /*height:270px;*/
    display:block;
}

/*
    Next/prev buttons
*/

#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:-39px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:585px;
}

/*
    Pagination
*/

.pagination {
    margin:5px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

/*
    Caption
*/

.caption {
    z-index:500;
    position:absolute;
    bottom:-35px;
    left:0;
    height:30px;
    padding:5px 20px 0 20px;
    background:#000;
    background:rgba(0,0,0,.5);
    width:540px;
    font-size:1.3em;
    line-height:1.33;
    color:#fff;
    border-top:1px solid #000;
    text-shadow:none;
}
#bannerSlider {
    float:left;
    width:200px;
    padding:5px;
    background:#fff;
    border:1px solid #ccc;
}

#bannerSlider div.slide {
    height: 200px;
}

JavaScript:

jQuery(function() {
    jQuery('#bannerSlider').slides({
        play: 2000

    });
});

これについてのフィードバックをいただければ幸いです。私は過去 1 時間、髪をかきむしっていました。ありがとう！

4

1 に答える 1

1

CSS の次の部分をコメントアウトする必要があります

.slides_container {
    width:570px;
    overflow:hidden;
    position:relative;
    display:none;
}
于 2012-08-24T16:05:04.670 に答える