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中。

您在float:left元素上设置了.slider .slide，这是 img 元素。但是它包含在 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

Answer 2

你只需要使用float：left to <li>

一个接一个地堆叠<li>

.slides > li{
    float:left;

}

jQuery滑块图像向下移动

2 个答案: