使用 elastislide 的 jQuery 动画问题

Question

如您在我的 DEMO 中所见，我在使用elastislide 时遇到问题。 。当您加载页面时，除了左侧的那个之外，所有框都正确加载了 -25px 的客户规范。 .我想做的是正确显示所有四个框。我还注意到，当您将鼠标悬停在最后一个框上时，尾部会消失，这应该与第一个框相同。

主页 jQuery:

$(".es-carousel ul li").hover(function(){
     $(this).children('span').animate({left:"20px"},{queue:false,duration:300});
     $(this).children('b').animate({top:"0px"},{queue:false,duration:300});
}, function() {
 $(this).children('span').animate({left:"20px"},{queue:false,duration:300});
     $(this).children('b').animate({top:"20px"},{queue:false,duration:300});
});

HTML:

<!-- Elastislide Carousel -->
        <div id="carousel" class="es-carousel-wrapper">
            <div class="es-carousel">
                <ul>
                    <li><a href="#"><img src="images/image_14.jpg" alt="image01" /></a><span class="carousel_caption">Lorem ipsum sit amet</span><b>+</b></li>     
                    <li><a href="#"><img src="images/image_14_2.jpg" alt="image02" /></a> <span class="carousel_caption">Sed do eiusmod tempor</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_3.jpg" alt="image03" /></a> <span class="carousel_caption">Tempor ut labore</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_4.jpg" alt="image04" /></a> <span class="carousel_caption">Dolore magna</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_5.jpg" alt="image05" /></a> <span class="carousel_caption">Lorem ipsum sit amet</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_6.jpg" alt="image06" /></a> <span class="carousel_caption">Sed do eiusmod tempor</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_7.jpg" alt="image07" /></a> <span class="carousel_caption">Lorem ipsum sit amet</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_8.jpg" alt="image08" /></a> <span class="carousel_caption">Dolore magna</span><b>+</b></li>
                </ul>
            </div>
        </div>
        <!-- End Elastislide Carousel -->

CSS:

.es-carousel-wrapper{padding:40px 0 0 0; position:relative;clear:both;}
.es-carousel{overflow:hidden;}
.es-carousel ul{display:none; padding:0px; margin:0px;}
.es-carousel ul li{height:100%;float:left;display:block; position: relative;}
.es-carousel ul li span.carousel_caption{ position:absolute; bottom:10px; left:-25px; background:url(images/slider_caption_bg.png) no-repeat; width:190px; color: #fff; padding:5px;}
.es-carousel ul li b{ position:absolute; right:0px; top:-20px;background:url(images/slider_caption_bg.png) repeat;color: #fff; padding:3px 5px;}
.es-carousel ul li a{display:block;}
.es-carousel ul li a img{display:block;border:none;max-height:100%;max-width:100%;padding:0px; margin:0px;}
.es-nav{display:none;}

Answer 1

看起来第一个和最后一个框的问题是，它们正在使用类 "es-carousel" 超出您的 div，您需要调整它的宽度和填充。

看起来你可以通过将你的 css 更新到这个填充来修复它。那行得通吗？

.es-carousel-wrapper {
padding-top: 40px;
padding-left: 30px;
position: relative;
clear: both;
}

.es-carousel {
overflow: hidden;
padding: 0 10px 0 25px;
}