Question

我有一个小的jQuery Carousel
HTML

<div class="advantages-slider">
<ul class="advantages-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

jQuery

$.fn.carousel = function () {
var self = this;

var width = self.find('li').outerWidth(true);
self.find('li:nth-child(2)').addClass('main-item');

setInterval(function () {       

    self.find('li').removeClass('main-item');
    self.find('li:nth-child(3)').addClass('main-item')
        .delay(10000)
        .queue(function () {
        $(this).removeClass('main-item');
        $(this).dequeue();
    });

    var text = self.find('.advantage-item-text').html();

    $('.advantage-full-item .full-item-text').slideUp(1000).empty().html(text).slideDown(1000).delay(8000);

    self.delay(8000).animate({
        right: '+=' + width
    }, {
        duration: 2000,
        queue: false,
        complete: function () {

            var first = self.find('li:first-child');
            first.remove();
            self.append(first);
            self.css({
                right: '-=' + width
            });
        }
    });
}, 10000);

return this;
};

$('.advantages-list').carousel();

http://jsfiddle.net/8d4Fh/21/

它会自动运行。但是现在我需要添加控制按钮，当我点击prev按钮滚动到上一张幻灯片后，当我点击next按钮向前滚动一张幻灯片时。请告诉我该怎么做？

Answer 1

如果您仍然感兴趣，我会尝试回答您昨天提出的问题 Fiddle
我修改了你的css / javascript代码，以便更轻松地点击prev和next按钮但最终的结果与你的相似我还添加了一个倒计时，在十秒后重启幻灯片（点击上一个下一个按钮）
这只是一个例子，如果你不喜欢它，我很抱歉给你带来不便。

<script type="text/javascript">
    $.fn.carousel = function () {

        var giranews = setInterval(function(){move()},5000);
        var width = $(this).find('li').outerWidth(true); 
        $(this).find('li:nth-child(3)').addClass('main-item');
        var that=$(this);

        function move(){
            var first = that.find('li:first-child');
            first.animate({'margin-left': '-='+width},2000,function(){
                that.append(first);
                that.find('li').removeAttr('style');
                that.find('li:nth-child(3)').addClass('main-item');
                that.find('li:nth-child(2)').removeClass('main-item');
            });
        };

        function stopx(){
               clearInterval(giranews);
        };

        function countdown(a) {
            var count = a;
             timerId = setInterval(function() {
                count--;
                console.log(count);
                if(count == 0) {
                    clearInterval(timerId);
                    giranews = setInterval(function(){move()},5000);
                };
            }, 1000);
        };

        $('.next-button-1').click(function(e){
            e.preventDefault();
            stopx();
            if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
            var first = that.find('li:first-child');
            first.stop().animate({'margin-left': '-='+width},2000,function(){
            that.append(first);
            that.find('li').removeAttr('style');
            that.find('li:nth-child(3)').addClass('main-item');
            that.find('li:nth-child(2)').removeClass('main-item');
           });
        });

        $('.prev-button-1').click(function(e){
            e.preventDefault();
            stopx();
            if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
            var first = that.find('li:first-child');
            var last = that.find('li:last-child');
            first.stop().animate({'margin-left': '+='+width},2000,function(){
            that.prepend(last);
            that.find('li').removeAttr('style');
            that.find('li:nth-child(3)').addClass('main-item');
            that.find('li:nth-child(4)').removeClass('main-item');
            });
        });

    };
</script>

Carousel Jquery添加上一个和下一个功能

1 个答案: