javascript - jQuery slider 图像向下移动

Question

我有一个 jQuery 图像 slider ，但每当有新图像滑动时，图像就会向下移动大约 30 像素。这是我的代码:

<div class="slider">
    <ul class="slides">
    <li><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
    <li><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
    <li><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
    <li><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
    <li><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav ul li").children("ul").hide(); //hides the lists when documents loads


    $(".nav ul li").hover( 
        function(){//onmouseover 
            $(this).children("ul").delay(450).slideDown(200); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(200); 
    }); 

    var width = 720;
    var up = 50;
    var animationSpeed = 1000;
    var pause = 1000;
    var currentSlide = 1;
    var $slider = $('.slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');
    var interval;

    function startSlider() {

    interval = setInterval(function() {
        $slideContainer.animate({'margin-left':'-='+width}, animationSpeed, function() {
          currentSlide++;
          if (currentSlide == $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}

    function stopSlider() {
      clearInterval(interval);
    }

    $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider)

    startSlider();
});
</script>

CSS 在这里:

.slider {
    width: 720px;
    height: 500px;
    overflow: hidden;
    position: absolute;
    margin: 0;
}

.slider .slides {
    width: 6000px;
    height: 500px;
    margin: 0;
    padding: 0;
}

.slider .slide {
    float: left;
    list-style-type: none;
    width: 720px;
    height: 500px;
}

Answer 1

问题出在您的 CSS 中。

您在 .slider .slide 元素(即 img 元素)上设置了 float:left。但是它包含在 li 元素中，每个 li 元素都会添加行高并将图像向下移动。

将幻灯片类移动到 li 元素而不是嵌套的 img 元素，你就成功了。

<div class="slider">
    <ul class="slides">
    <li class="slide"><img  src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
    <li class="slide"><img  src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
    <li class="slide"><img  src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
    <li class="slide"><img  src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
    <li class="slide"><img  src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>

http://jsbin.com/zoxisisoka/edit?html,output