Question

我的序列滑块中有一个错误，我不知道是什么导致它。这是URL

如果你看滑块足够长，你会看到当滑块到达最后一张幻灯片并再次显示第一张幻灯片时，上一张幻灯片中的文字与当前幻灯片重叠。

这种情况发生在所有浏览器中。非常感谢你的帮助。

HTML：

<section class="slider clearfix">
        <div id="sequence">
            <ul>
                <li>
                    <div class="info animate-in">
                        <h2>Last minute Winter escapes</h2><br />
                        <p>January 2013 holidays 40% off! An unique opportunity to realize your dreams</p>
                    </div>
                    <img class="main-image animate-in" src="images/slider/img3.jpg" alt="" />
                </li>
                <li>
                    <div class="info animate-in">
                        <h2>Check out our top weekly deals</h2><br />
                        <p>Save Now. Book Later.</p>
                    </div>
                    <img class="main-image animate-in" src="images/slider/img1.jpg" alt="" />
                </li>
                <li>
                    <div class="info animate-in">
                        <h2>Check out last minute flight, hotel &amp; vacation offers!</h2><br />
                        <p>Save up to 50%!</p>
                    </div>
                    <img class="main-image animate-in" src="images/slider/img2.jpg" alt="" />
                </li>
            </ul>
        </div>
    </section>
    <!--//slider-->

CSS：

#sequence    {/*backface-visibility prevents graphical glitches when frames are animating*/-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-o-backface-visibility: hidden;backface-visibility: hidden;}
#sequence ul            {top:0;left:0;}
#sequence li > *        { position: absolute;width: 100%;height: 100%;}
#sequence           {height:100%;margin: 0 auto;position: relative;width: 100%;overflow:hidden;}

.slider .info               {width: 100%;left: 150%;top: 40%;line-height: 1.2em;z-index: 10;vertical-align: middle;-webkit-transition-duration: 4s;-moz-transition-duration: 4s;-o-transition-duration: 4s;-ms-transition-duration: 4s;transition-duration: 4s;position:absolute;}
.animate-in .info           {left:50%;margin-left:-570px;-webkit-transition-duration: 4s;-moz-transition-duration: 4s;-o-transition-duration: 4s;-ms-transition-duration: 4s;transition-duration: 4s;}
.animate-out .info          {left:50%;margin-left:-570px;-webkit-transition-duration: 4s;-moz-transition-duration: 4s;-o-transition-duration: 4s;-ms-transition-duration: 4s;transition-duration: 4s;}

.main-image                     {opacity: 0;top: 0;left:0;vertical-align: middle;-webkit-transition-property: left top;-moz-transition-property: left top;-o-transition-property: left top;-ms-transition-property: left top;transition-property: left top;z-index: 1;}
.animate-in .main-image         {left: 0%;opacity: 1;top: 0;-webkit-transition-duration: 4s;-moz-transition-duration: 4s;-o-transition-duration: 4s;-ms-transition-duration: 4s;transition-duration: 4s;-webkit-transition-property: left top;-moz-transition-property: left top;-o-transition-property: left top;-ms-transition-property: left top;transition-property: left top;z-index: 1;}
.animate-out .main-image    {left: 6%;opacity: 0;top: 0;-webkit-transition-duration: 4s;-moz-transition-duration: 4s;-o-transition-duration: 4s;-ms-transition-duration: 4s;transition-duration: 4s;-webkit-transition-property: left top;-moz-transition-property: left top;-o-transition-property: left top;-ms-transition-property: left top;transition-property: left top;z-index: 1;}

.slider {width:100%;height:100%;display:inline-block;}
.slider li img {width:100%;height:100%;}

.slider li  {font-size:1em;text-align:left;}
.info h2        {color:#3FBFB8;background:#fff;padding:10px 20px;display:inline-block;margin:0 0 3px;-webkit-border-radius:21px;-moz-border-radius:21px;border-radius:21px;}
.info p     {font-size:1.5em;background:#fff;padding:12px 20px 14px;display:inline-block;-webkit-border-radius:21px;-moz-border-radius:21px;border-radius:21px;}

JAVASCRIPT（+ jquery＆amp; plugin.js）：

$(document).ready(function(){
    var sequence = $("#sequence").sequence(options).data("sequence");

    var options = {
        autoPlay: true,
        autoPlayDelay: 1000,
        pauseOnHover: false,
        nextButton: false,
        prevButton: false,
        preloader: false,
        navigationSkipThreshold: 1000,
        fadeFrameWhenSkipped: false
    };

});

序列滑块css bug

0 个答案: