Question

在我们的网站上实现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

    });
});

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

Answer 1

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

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

我是如何打破slide.js的“幻灯片”的？

1 个答案: