如何在滚动时使旋转木马不抖动并在悬停时暂停

时间：2016-09-20 17:25:53

标签： javascript jquery html scroll carousel

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

另外，如何暂停鼠标并继续鼠标移出？

这是我的代码：

$(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>

2 个答案:

答案 0 :(得分：1)

要避免跳转，请将代码的最后一部分更改为以下内容：

$ul.stop().animate({
            left: -200
        }, time, 'linear', function(){
            $ul.append($ul.children('li:first-child'));
            $ul.css({left: 4});
    AnimateCarousel();
        });

答案 1 :(得分：1)

因为li之间的默认边距是4px，所以我将其添加到css中的 .carousel li {，这样只要第一个li附加到结尾，任何时候都会尊重此边距。

添加：暂停鼠标悬停并继续鼠标移出。

摘录：

＆＃13;
＆＃13; 
$(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();
    }
  });
}
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题