Question

我在 DEMO 中看到了使用 elastislide 的jQuery动画问题。当您加载页面时，左侧的所有框都会正确加载-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

看起来第一个和最后一个方框的问题是，它们是在你的div之外的“es-carousel”你需要使用它的宽度和它的填充。

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

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

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

使用弹性滑动的jQuery动画问题

1 个答案: