我滚动的横幅代码在哪里出错，让它正确滚动

Question

我想知道任何人都可以帮助我滚动横幅。我遇到的问题是，当它在屏幕上加载时，它只会移动一张照片。我正在使用的代码被测量为恰好在导航栏上方的页面顶部。

＆＃13;

＆＃13;

$(function () {

    //settings for slider
    var width = 1165;
    var animationSpeed = 2000;
    var pause = 1000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

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

    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer.on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();


});

＆＃13;

#slider {
    width: 1165px;
    height: 100px;
    overflow: hidden;
}
#slider .slides {
    display: block;
    width: 1165px;
    height: 100px;
    margin: 0;
    padding: 0;
}
#slider .slide {
    float: left;
    list-style-type: none;
    width: 1165px;
    height: 100px;
}
.slide1 {
    background: red;
}
.slide2 {
    background: blue;
}
.slide3 {
    background: green;
}
.slide4 {
    background: purple;
}
.slide5 {
    background: pink;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
    <div id="slider">
        <ul class="slides">
            <li class="slide slide1">slide1</li>
            <li class="slide slide2">slide2</li>
            <li class="slide slide3">slide3</li>
            <li class="slide slide4">slide4</li>
            <li class="slide slide5">slide5</li>
            <li class="slide slide1">slide1</li>
        </ul>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我认为我的问题是我的测量结果我不完全理解它，知道要改变什么????我正在使用的图片是宽2192px *高度220px，这可能解释我正在测量我的测量

Answer 1

我认为你的代码很好。实际问题是你的li元素是垂直堆叠的，因为它们都是float ed并且当它们对于父元素来说太大时会浮动换行。

您可以尝试在每个display: inline-block;上使用.slide，在white-space: nowrap;

上使用.slides，而不是将它们全部展开

以下是一个示例，您原来的唯一更改是CSS：

$(function () {

    //settings for slider
    var width = 1165;
    var animationSpeed = 2000;
    var pause = 1000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

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

    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer.on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();


});

#slider {
    width: 1165px;
    height: 100px;
    overflow: hidden;
}
#slider .slides {
    display: block;
    width: 1165px;
    height: 100px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 0em;
}
#slider .slide {
    list-style-type: none;
    width: 1165px;
    height: 100px;
    display: inline-block;
    font-size: 1rem;
}
.slide1 {
    background: red;
}
.slide2 {
    background: blue;
}
.slide3 {
    background: green;
}
.slide4 {
    background: purple;
}
.slide5 {
    background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
    <div id="slider">
        <ul class="slides">
            <li class="slide slide1">slide1</li>
            <li class="slide slide2">slide2</li>
            <li class="slide slide3">slide3</li>
            <li class="slide slide4">slide4</li>
            <li class="slide slide5">slide5</li>
            <li class="slide slide1">slide1</li>
        </ul>
    </div>
</div>