javascript - 如何使旋转木马在滚动和悬停时不晃动

Question

问题是每次调用 AnimateCarousel() 时，图像都会在 slider 中向右跳一点，然后再继续。我该如何预防？

此外，如何在鼠标悬停时暂停并在鼠标移开时继续？

这是我的代码:

$(document).ready(function() {
    AnimateCarousel();
});

function AnimateCarousel() {
    console.log("test");
    var SD = 210;
    //var $carousel = $(that).parent();
    var $ul = $(".carousel").children('ul');
    var distance = SD;
    var time = 5500;
    var rate = distance / time;

    distance = Math.abs($ul.position().left);
    console.log(distance + " distance");
    if (distance != 0) {
        distance = SD - distance;

        time = distance / rate;
    }
    $ul.stop().animate({
        left: -210
    }, time, 'linear', function() {
        $ul.append($ul.children('li:first-child'));
        $ul.css({
            left: 0
        });
        AnimateCarousel();
    });
}

* {
    padding: 0;
    margin: 0;
}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 200px;
}

.carousel ul {
    display: block;
    list-style: none;
    white-space: nowrap;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
}

.tst1 {
    color: #FFF;
    opacity: 0;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.carousel li {
    display: inline-block;
    position: relative;
}

.carousel li:hover > div {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
    <ul>
        <li><img src="http://fakeimg.pl/200x200" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div>
        </li>
        <li><img src="http://fakeimg.pl/200x200" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div>
        </li>
        <li><img src="http://fakeimg.pl/200x200" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div>
        </li>
        <li><img src="http://fakeimg.pl/200x200" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div>
        </li>

        <li><img src="http://fakeimg.pl/200x200" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div>
        </li>
        <li><img src="http://fakeimg.pl/200x200" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div>
        </li>

    </ul>
</div>

Answer 1

因为 li 之间的默认边距是 4px，所以我将它添加到 css 中的 .carousel li { 中，这样任何时候第一个 li 附加到末尾时都会遵守这个边距。

添加:鼠标悬停时暂停，鼠标移开时继续。

片段:

$(document).ready(function(){
  AnimateCarousel();

  $(".carousel ul").hover(function(e) {
    $(this).addClass('stop-animation');
    $(this).stop(false, false);
  }, function(e) {
    $(this).removeClass('stop-animation');
    AnimateCarousel();
  });
});

function AnimateCarousel(){
  var $ul = $(".carousel").children('ul');
  var time = 1500;
  $ul.animate({
    left: -210
  }, time, 'linear', function(){
    $ul.append($ul.children('li:first-child'));
    $ul.css({left: 0});
    if (!$ul.is('.stop-animation')) {
      AnimateCarousel();
    }
  });
}

* {
  padding: 0;
  margin: 0;
}
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 200px;
}

.carousel ul {
  display: block;
  list-style: none;
  white-space: nowrap;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
}

.tst1 {
  color: #FFF;
  opacity: 0;
  -webkit-transition: all 5000ms ease;
  -moz-transition: all 5000ms ease;
  -ms-transition: all 5000ms ease;
  -o-transition: all 5000ms ease;
  transition: all 5000ms ease;
}

.carousel li {
  display: inline-block;
  position: relative;
  margin-left: 4px;  /*   row added  */
}

.carousel li:hover > div {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="carousel">
    <ul>
        <li><img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="http://www.shinyshiny.tv/asus-android-smartphone-thumb-200x200.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/en/4/4b/Little_island_colour_logo_200x200.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>

        <li><img src="http://s1.dmcdn.net/CZC2w/200x200-qyf.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="http://s1.dmcdn.net/DngOt/200x200-nZB.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>

    </ul>
</div>