1

我有一个垂直滚动轮播的小问题。我在这个项目中使用 JQuery、HTML 和 CSS。这个想法是让它在垂直运动中无休止地滚动，它工作正常，但是在第一次转换时它从最后一个孩子跳到第二个而不是从最后一个转换到第一个，它在第一次转换后正常工作。

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

的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);

最后是小提琴的链接

4

3 回答 3

1 
car_ul.css({
        'top': '+=120px'
    });
于 2013-08-08T01:56:43.280 回答
0

我通过编辑 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);

不管怎么说，多谢拉 ：）

于 2013-08-08T01:56:52.770 回答
0

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

'top': parseInt((car_ul.css('top')) - car_ul.find('li').outerHeight() - 10,10)
于 2013-08-08T02:01:18.757 回答