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

    });
});

我很感激对此的任何反馈，过去一个小时我一直在扯头发。谢谢！

4

1 回答 1

1

您需要注释掉 CSS 的以下部分

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