jQuery滑塊圖像向下移動

Question

我有一個jQuery圖像滑塊，但每當新圖像滑動時，圖像向下移動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元素上設置了float:left元素，它是img元素。但是它包裹在一個元素中，每個元素都會添加行高並將圖像向下移動。

將幻燈片類移動到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

Answer 2

你只需要使用浮動堆棧<li>一一後：左<li>

.slides > li{ 
    float:left; 

}