Question

我在垂直滚动旋转木马上遇到了一个小问题。我正在为这个项目使用JQuery，HTML和CSS。这个想法是让它在垂直运动中无休止地滚动，它工作正常，但是在第一次转换时，它从最后一个孩子跳到第二个孩子而不是从最后一个孩子过渡到第一个孩子，它在第一次过渡后正常工作。 / p>

这是最后的代码和小提琴：

HTML：

<div id='carousel_container'>
 <div id='carousel_inner'>
  <ul id='carousel_ul'>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_1.png' /></a></li>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_2.png' /></a></li>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_3.png' /></a></li>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_4.png' /></a></li>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_5.png' /></a></li>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_6.png' /></a></li>
   <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_7.png' /></a></li>
  </ul>
 </div>
</div>

CSS：

#carousel_container {
    position: absolute;
    bottom:26px;
    right:0;
}
#carousel_inner {
    width:210px;
    height:120px;
    overflow: hidden;
    background: rgba(0, 0, 0, .8);
}
#carousel_ul {
    position: relative;
    top: 0px;
    list-style-type: none;
    margin: 0px;
    padding: 0 0 10px 0;
    height:1000px;
    width:210px;
}
#carousel_ul li {
    width: 200px;
    padding: 0px;
    height: 110px;
    margin: 10px 5px;
}
#carousel_ul li img {
    cursor: pointer;
    cursor: hand;
    border: 0px;
    margin-bottom: -4px;
}

JQuery / JS：

var car_ul = $('#carousel_ul');
car_ul.find('li').first().before(car_ul.find('li').last());

function scroll_down() {
    $('#carousel_ul:not(:animated)').animate({
        'top': parseInt(car_ul.css('top')) - car_ul.find('li').outerHeight() - 10
    }, 500, function () {
        var cars = car_ul.find('li');
        car_ul.css({
            'top': '-120px'
        });
        cars.last().after(cars.first());
    });
}

var interval_id = setInterval(function () {
    scroll_down();
}, 5000);

最后是link to the fiddle

Answer 1

car_ul.css({
        'top': '+=120px'
    });

Answer 2

我通过编辑javascript / JQuery来解决这个问题：

var car_ul = $('#carousel_ul');
function scroll_down(){
 $('#carousel_ul:not(:animated)').animate({'top' : parseInt(car_ul.css('top')) - car_ul.find('li').outerHeight() - 10},500,function(){
  var cars = car_ul.find('li');
  cars.last().before(cars.first());
  car_ul.css({'top' : '0px'});
 });
}
var interval_id = setInterval(function(){scroll_down();},5000);

非常感谢：）

Answer 3

只需在代码上编辑此行，因为它缺少Radix参数

'top': parseInt((car_ul.css('top')) - car_ul.find('li').outerHeight() - 10,10)

JQuery Vertical Carousel无休止的滚动

3 个答案: