自定义jQuery滑块，用于html元素不起作用

Question

我正在尝试添加滑块以在我的主屏幕上为某些段落制作动画。 我不想使用任何插件。 我想用jQuery自己创建它。但是有一个问题，似乎jQuery中的条件不起作用。

请查看以下代码并尝试修复它。

<div id="slider-viewport">
  <div class="slider">
    <p>1 Cloud based e-commerce solution for your downloadable products</p>
    <p>2 Cloud based e-commerce solution for your downloadable products</p>
    <p>3 Cloud based e-commerce solution for your downloadable products</p>
    <p>4 Cloud based e-commerce solution for your downloadable products</p>
  </div>
</div>

CSS

.slider p {
    font-size: 25px;
    color: #fff;
    height: 100px;
    margin: 0;
}

#slider-viewport {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: black;
}

.slider {
    width: 100%;
    height: auto;
}

的jQuery

$(document).ready(function() {

    $('.slider p').first().clone().appendTo('#slider-viewport .slider')

    function slider() {

        var $slider = $('#slider-viewport .slider');
        var currentMargin = $slider.css('margin-top');
        var paraHeight = $('.slider p').height();
        var setMargin = parseInt(currentMargin) - paraHeight;
        var resetMargin = -300;

        if (currentMargin < resetMargin) {
            $slider.css('margin-top', 0);
        };

        $slider.animate({
            marginTop: setMargin
        }, {
            duration: 600,
            easing: "easeOutQuint"
            }
        );
    };

    setInterval(slider, 3000);

});

Answer 1

你可以通过动画第一个元素来简化一些事情，然后在动画之后将其重置并放回到列表的末尾，也可以通过使函数递归来避免setInterval()

function slider() {
    var $slider = $('#slider-viewport .slider');
    var $first = $slider.find('p:first');

    $first.delay(3000).animate({'margin-top': $first.height() * -1}, 600, "easeOutQuint", function () {
        $(this).css('margin-top', 0).appendTo($slider);
        slider();
    }); 
};

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

<强> Demo fiddle

Answer 2

var currentMargin = $slider.css('margin-top').split('px')[0];

$slider.css('margin-top', '0px');

更新

$(document).ready(function() {

setInterval(slider, 3000);

});


var $slider = $('#slider-viewport .slider'); 
var marginNew = $('.slider p').height();
var limit=marginNew*$('.slider p').length;

function slider() {            

    if(marginNew>=limit)
       marginNew=0;            

    $slider.animate({"margin-top":-marginNew});

    marginNew+=100;      


};

http://jsfiddle.net/Xh9SM/2/

Answer 3

修正了

http://jsfiddle.net/sk5wq/4/

html代码：

<div id="slider-viewport">
  <div class="slider">
    <p>1 Cloud based e-commerce solution for your downloadable products</p>
    <p>2 Cloud based e-commerce solution for your downloadable products</p>
    <p>3 Cloud based e-commerce solution for your downloadable products</p>
    <p>4 Cloud based e-commerce solution for your downloadable products</p>
  </div>
</div>

css代码：

.slider p {
    font-size: 25px;
    color: #fff;
    height: 100px;
    margin: 0;
}

#slider-viewport {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: black;
}

.slider {
    width: 100%;
    height: auto;
}

更新js代码：

$(document).ready(function() {
    setInterval(initSlider, 3000);
});

function initSlider() {

var slider = $('#slider-viewport .slider'),
    sliderMargin = parseInt(slider.css('margin-top')),
    pHeight = parseInt(slider.find('p').height()),
    sliderGep = '-'+(parseInt(slider.height())-pHeight),
    go = 0;   

    if (sliderMargin <= sliderGep) {
        slider.animate({marginTop:pHeight+'px'},0);
        go = '0px'
    }else{
        go = '-='+pHeight+'px'
    }

    slider.animate({
        marginTop: go
    }, {
        duration: 600,
        easing: "easeOutQuint"
    });
}