Javascript Carousel使用JS管理状态并使用CSS设置动画

这是我第一次尝试使用css3创建旋转木马，不太确定我是否正确，但这是一次尝试，并且这个旋转木马将仅在移动设备上显示

据我所知，JavaScript实际上应该只用于管理状态，然后使用CSS3对其进行动画处理，因此我将其解释为基本上使用js交换类，并使用CSS3对这些类进行转换

我所知道的唯一真正的问题是实际的动画和状态管理，我需要它像一个无限/循环旋转木马一样进行动画制作，但由于某些原因，我没有得到它

这是我的建议

以下是HTML：

<div class="vertical-list mobile-carousel">
    <div class="column active">
        <img src="http://placehold.it/200x200" class="circular-image" alt=""/>
        <p>
            <strong>Slide 1</strong><br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dignissimos perspiciatis voluptas voluptatem!
            Ad debitis dignissimos doloribus exercitationem natus officiis quod sit, vitae voluptate. Alias debitis delectus exercitationem quia.
        </p>
    </div>
    <div class="column">
        <img src="http://placehold.it/200x200" class="circular-image" alt=""/>
        <p>
            <strong>Slide 2</strong><br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dignissimos perspiciatis voluptas voluptatem!
            Ad debitis dignissimos doloribus exercitationem natus officiis quod sit, vitae voluptate. Alias debitis delectus exercitationem quia.
        </p>
    </div>
    <div class="column last">
        <img src="http://placehold.it/200x200" class="circular-image" alt=""/>
        <p>
            <strong>Slide 3</strong><br>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dignissimos perspiciatis voluptas voluptatem!
            Ad debitis dignissimos doloribus exercitationem natus officiis quod sit, vitae voluptate. Alias debitis delectus exercitationem quia.
        </p>
    </div>
    <a class="carousel-navigate next" href="#next">Next</a>
    <a class="carousel-navigate prev" href="#prev">Prev</a>
</div>

还有Javascript：

;( function($, window, undefined) {
    'use strict';

    $.Carousel = function(element) {
        this.$el = $(element);
    };

    $.Carousel.prototype = {
        _init: function(){ //Init The Plugin
            this._layout();
            this._initEvents();
        },
        _layout: function(){ //Map the Layout of the Menu
            this.pages = this.$el.children( '.column' );
            this.pagesLength = this.pages.length;
            this.activePage = this.$el.children('.active');
            this.nextPage = this.$el.children('.next');
            this.prevPage = this.$el.children('.prev');

            //Set Some Layout Rules
//            this.pagesWrapper.width(100 * this.pagesLength+'%');
//            this.pages.width(100/this.pagesLength+'%');
        },
        _initEvents: function () { //Set Up the Event Listeners
            var self = this;
            this.nextPage.on('click.carousel', function(e) {
                self._page(+1);
                e.preventDefault();
            });

            this.prevPage.on('click.carousel', function(e) {
                self._page(-1);
                e.preventDefault();
            });
        },
        _page: function (delta) {
            var index = this.activePage.index() + delta,
                length = (this.pagesLength - 1);
            if(index < 0){
                index = length;
            }
            if(index > length){
                index = 0;
            }
            this._animatePage(this.activePage,$(this.pages.get(index)),delta);
        },
        _animatePage: function (active, target, direction){
            var self = this,
                direction_in = "",
                direction_out = "";

            if(direction > 1){
                direction_in = 'right';
                direction_out = 'left';
            }else{
                direction_in = 'left';
                direction_out = 'right';
            }

            this.activePage.addClass('slide-out '+direction_out); //Start Sliding Active Page Out
            target.addClass('slide-in '+direction_in); //Start Sliding Target Page In
            setTimeout(function() {
                //Remove Transition Classes from Active Page
                self.activePage.removeClass('active slide-out '+direction_out);

                //Change Active to Target Remove Transition Classes
                self.activePage = target;
                self.activePage.addClass('active').removeClass('slide-in '+direction_in);
            }, 300);
        }
    };

    $.fn.carousel = function() { //Create the Instance of the Menu
        var instance = $.data( this, 'carousel', new $.Carousel(this));
        this.each(function() {
            instance ? instance._init() : instance = $.data( this, 'carousel', new $.Carousel(this ) );
        });
        return instance;
    }
})(jQuery, window);

$(function() {
    $('.mobile-carousel').carousel();
});

；（函数（$，窗口，未定义）{
"严格使用",；
$.Carousel=函数（元素）{
该.$el=$（元素）；
};
$.Carousel.prototype={
_init:function（）{//init插件
这个；
这个；
},
_布局：函数（）{//映射菜单的布局
this.pages=this.$el.children（“.column”）；
this.pagesLength=this.pages.length；
this.activePage=this.$el.children（'.active'）；
this.nextPage=this.$el.children（'.next'）；
this.prevPage=this.$el.children（'.prev'）；
//设置一些布局规则
//this.pagesWrapper.width（100*this.pagesLength+'%'）；
//this.pages.width（100/this.pagesLength+'%'）；
},
_initEvents:function（）{//设置事件侦听器
var self=这个；
此.nextPage.on（'click.carousel'，函数（e）{
自我介绍页（+1）；
e、 预防默认值（）；
});
此.prevPage.on（'click.carousel'，函数（e）{
第页（-1）；
e、 预防默认值（）；
});
},
_页码：函数（增量）{
var index=this.activePage.index（）+delta，
长度=（this.pagesLength-1）；
如果（指数<0）{
指数=长度；
}
如果（索引>长度）{
指数=0；
}
this._animatePage（this.activePage，$（this.pages.get（index）），delta）；
},
_动画页面：功能（活动、目标、方向）{
var self=这个，
方向_in=“”，
方向_out=“”；
如果（方向>1）{
方向_in='右'；
方向_out=‘左’；
}否则{
方向_in=‘左’；
方向_out=‘右’；
}
this.activePage.addClass（'slide-out'+direction_-out）；//开始滑出活动页面
target.addClass（'slide-in'+direction_-in）；//在中开始滑动目标页
setTimeout（函数（）{
//从活动页中删除转换类
self.activePage.removeClass（'active slide out'+direction\u out）；
//更改活动目标以删除转换类
self.activePage=目标；
self.activePage.addClass（'active'）.removeClass（'slide-in'+direction_-in'）；
}, 300);
}
};
$.fn.carousel=function（）{//创建菜单的实例
var实例=$.data（这是“carousel”，新的$.carousel（这））；
这个。每个（函数（）{
实例？实例。_init（）：实例=$.data（此“旋转木马”，新的$.carousel（此））；
});
返回实例；
}
})（jQuery，窗口）；
$（函数（）{
$（'.mobile carousel'）.carousel（）；
});

---

任何帮助都将不胜感激。

要做到这一点，最简单的方法可能是使用一个简单的方法

大概是这样的：

(function ($, window, undefined) {
    'use strict';

    $.Carousel = function (element) {
        this.$el = $(element);
    };

    $.Carousel.prototype = {

        _init: function () { //Init The Plugin
            this._layout();
            this._initEvents();
            this.autoPlay();

        },
        _layout: function () { //Map the Layout of the Menu
            this.pages = this.$el.children('.column');
            this.pagesLength = this.pages.length;
            this.activePage = this.$el.children('.active');
            this.nextPage = this.$el.children('.next');
            this.prevPage = this.$el.children('.prev');
        },
        autoPlay: function () {
            var self = this;
            var play = setInterval(function () {
                self._page(+1); // same as clicking next
            }, 3000); // every 3 seconds
            $('.mobile-carousel').hover(function () { // when mouse is over carousel
                clearInterval(play); // clearInterval to pause
            }, function () { // when mouse is not over carousel 
                play = setInterval(function () { // setInterval again to resume playing
                    self._page(+1);
                }, 3000);
            });
        },
        _initEvents: function () { //Set Up the Event Listeners
            var self = this;
            this.nextPage.on('click.carousel', function (e) {
                self._page(+1);
                e.preventDefault();
            });

            this.prevPage.on('click.carousel', function (e) {
                self._page(-1);
                e.preventDefault();
            });
        },
        _page: function (delta) {
            var index = this.activePage.index() + delta,
                length = (this.pagesLength - 1);
            if (index < 0) {
                index = length;
            }
            if (index > length) {
                index = 0;
            }
            this._animatePage(this.activePage, $(this.pages.get(index)), delta);
        },
        _animatePage: function (active, target, direction) {
            var self = this,
                direction_in = "",
                direction_out = "";

            if (direction < 1) {
/*changed*/     direction_in = 'left'; // swapped these
                direction_out = 'right';
            } else {
                direction_in = 'right'; // with these
                direction_out = 'left';
            }

            this.activePage.addClass('slide-out ' + direction_out); //Start Sliding Active Page Out
            target.addClass('slide-in ' + direction_in); //Start Sliding Target Page In
            setTimeout(function () {
                //Remove Transition Classes from Active Page
                self.activePage.removeClass('active slide-out ' + direction_out);

                //Change Active to Target Remove Transition Classes
                self.activePage = target;
                self.activePage.addClass('active').removeClass('slide-in ' + direction_in);
            }, 300);
        }
    };

    $.fn.carousel = function () { //Create the Instance of the Menu
        var instance = $.data(this, 'carousel', new $.Carousel(this));
        this.each(function () {
            instance ? instance._init() : instance = $.data(this, 'carousel', new $.Carousel(this));
        });
        return instance;
    };
})(jQuery, window);

$(function () {
    $('.mobile-carousel').carousel();
});

---

因此，当前功能的唯一问题是无法使其循环？您的JSFIDLE演示似乎不起作用。到目前为止，它没有循环，而是要使css3幻灯片动画比任何东西（如典型的无限旋转木马）运行得更快。。我刚刚检查了JSFIDLE，它似乎工作得非常好？非常好。谢谢你，最后一件事，我们如何用css3制作滑动动画而不是交叉淡入过渡？@Dawiddvanderhoven我现在正在工作，但今晚晚些时候我应该可以帮你。非常感谢你，伙计，期待着看到它。。奇怪的是，我的一天就要结束了，而你的一天似乎才刚刚开始。。

(function ($, window, undefined) {
    'use strict';

    $.Carousel = function (element) {
        this.$el = $(element);
    };

    $.Carousel.prototype = {

        _init: function () { //Init The Plugin
            this._layout();
            this._initEvents();
            this.autoPlay();

        },
        _layout: function () { //Map the Layout of the Menu
            this.pages = this.$el.children('.column');
            this.pagesLength = this.pages.length;
            this.activePage = this.$el.children('.active');
            this.nextPage = this.$el.children('.next');
            this.prevPage = this.$el.children('.prev');
        },
        autoPlay: function () {
            var self = this;
            var play = setInterval(function () {
                self._page(+1); // same as clicking next
            }, 3000); // every 3 seconds
            $('.mobile-carousel').hover(function () { // when mouse is over carousel
                clearInterval(play); // clearInterval to pause
            }, function () { // when mouse is not over carousel 
                play = setInterval(function () { // setInterval again to resume playing
                    self._page(+1);
                }, 3000);
            });
        },
        _initEvents: function () { //Set Up the Event Listeners
            var self = this;
            this.nextPage.on('click.carousel', function (e) {
                self._page(+1);
                e.preventDefault();
            });

            this.prevPage.on('click.carousel', function (e) {
                self._page(-1);
                e.preventDefault();
            });
        },
        _page: function (delta) {
            var index = this.activePage.index() + delta,
                length = (this.pagesLength - 1);
            if (index < 0) {
                index = length;
            }
            if (index > length) {
                index = 0;
            }
            this._animatePage(this.activePage, $(this.pages.get(index)), delta);
        },
        _animatePage: function (active, target, direction) {
            var self = this,
                direction_in = "",
                direction_out = "";

            if (direction < 1) {
/*changed*/     direction_in = 'left'; // swapped these
                direction_out = 'right';
            } else {
                direction_in = 'right'; // with these
                direction_out = 'left';
            }

            this.activePage.addClass('slide-out ' + direction_out); //Start Sliding Active Page Out
            target.addClass('slide-in ' + direction_in); //Start Sliding Target Page In
            setTimeout(function () {
                //Remove Transition Classes from Active Page
                self.activePage.removeClass('active slide-out ' + direction_out);

                //Change Active to Target Remove Transition Classes
                self.activePage = target;
                self.activePage.addClass('active').removeClass('slide-in ' + direction_in);
            }, 300);
        }
    };

    $.fn.carousel = function () { //Create the Instance of the Menu
        var instance = $.data(this, 'carousel', new $.Carousel(this));
        this.each(function () {
            instance ? instance._init() : instance = $.data(this, 'carousel', new $.Carousel(this));
        });
        return instance;
    };
})(jQuery, window);

$(function () {
    $('.mobile-carousel').carousel();
});

.mobile-carousel {
    position: relative;
    height:300px;
    overflow: hidden;
}
.mobile-carousel .column {
    /*Start State*/
    position: absolute;
    background: red;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    opacity: 0;
}
.mobile-carousel .column.active {
    /*Idle State*/
    opacity: 1;
    left:0;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.mobile-carousel .column.slide-in.right, .mobile-carousel .column.slide-in.left {
    /*Animate In*/
    opacity: 1;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.mobile-carousel .column.slide-in.right, .mobile-carousel .column.slide-out.right {
    left:-105%;
}
.mobile-carousel .column.slide-in.left, .mobile-carousel .column.slide-out.left {
    left:105%;
}
.mobile-carousel .column.slide-out.left, .mobile-carousel .column.slide-out.right {
    /*Animate Out*/
    opacity: 0;
}
.mobile-carousel .carousel-navigate {
    position: absolute;
    top: 50%;
    display: block;
}
.mobile-carousel .next {
    right: 0;
}
.mobile-carousel .prev {
    left: 0;
}