Javascript 滑动效果不起作用

我已经创建了一个无限制滑动选项的旋转木马。如果用户从最后一项向左滑动，将显示第一项；如果从第一项向右滑动，将显示最后一项。滑动效果适用于每个滑动事件，但从最后一项滑动到第一项以及从第一项滑动到最后一项时，滑动效果不起作用。这是我的密码-

categorizedCarousel = Ext.create('Ext.Carousel', {
        title: record.data.name,
        layout: {
            type: 'vbox',
            pack: 'center'
        },
        listeners: {
            element: 'element',
            swipe: function(e) {
                if (e.direction == 'right') {

                    if (this.getActiveIndex() === 0) {
                        this.animateActiveItem(this.getMaxItemIndex(), {type: 'slide', direction: 'right'});
                    }
                } else {

                    if (this.getActiveIndex() === this.getMaxItemIndex()) {
                        this.animateActiveItem(0, {type: 'slide', direction: 'left'});
                    }
                }
            }
        }
    });

---

但是上面的“{type:'slide'，direction:'right/left'}”不起作用。我试图找到这个解决方案已经有很长时间了，两个多星期了，但仍然没有解决方案。在polease中有任何解决方案吗？

我假设您在dom中没有按正确顺序显示的图像，因此无法显示此幻灯片动画。 例如：

<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>

img 1
img 2
img 3
img 4

如果要从img 4滑动到img1，首先必须在dom中将img 1放在img 4之后，这样它们就可以很好地挨在一起-可以通过不断移动每个项目或在开始和结束时复制第一个和最后一个项目来完成，动画完成后，跳回到实际项目：

在sipe从4到1之前：

<li>img 4 clone</li>
<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li active>img 4</li>
<li>img 1 copy</li>

img 4克隆
img 1
img 2
img 3
img 4
img 1份

设置动画时：

<li>img 4 clone</li>
<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>
<li active>img 1 copy</li>

img 4克隆
img 1
img 2
img 3
img 4
img 1副本

动画完成时（跳到实际img 1）

img 4克隆
img 1
img 2
img 3
img 4
img 1份

实现不起作用（或可能永远不起作用）的原因：

• 在

  Ext.Carousel

  中旋转项目的事件是

  dragstart

  和

  dragend

  ，而不是

  滑动

  。它们的性质完全不同

• animateActiveItem

  不是在旋转木马中的项目之间设置动画的正确操作

• 从右向左拖动到最后一个项目时，无法“预览”第一个项目，因为它不在那里

下面是

Ext.Carousel

的工作覆盖。这正是你想要的。基本上，它的想法是“旋转”转盘的

项

配置，然后强制刷新

Ext.define('myApp.view.InfCarousel',{
  xtype: 'InfCarousel',
  extend: 'Ext.carousel.Carousel',

  rotateItemBack: function(item){
    if(!item) return null;
    var initem = item.items;
    var numitems = initem.length;
    var newItem = [];

    newItem.push(initem[numitems-1]);
    for(i=0; i<numitems-1; ++i)
      newItem.push(initem[i]);

    return newItem;
  },

  rotateItemFront: function(item){
    if(!item) return null;
    var initem = item.items;
    var numitems = initem.length;
    var newItem = [];

    for(i=0; i<numitems-1; ++i)
      newItem.push(initem[i+1]);

    newItem.push(initem[0]);

    return newItem;
  },

  config:{
    indicator: false,
    listeners:{
        activeitemchange:function(){
            this.fireEvent('activeitemchangeloop', arguments);
        },

        activeitemchangeloop: function ()
        {
          var activeIndex = this.getActiveIndex(),
              maxIndex = this.getMaxItemIndex();

          if(activeIndex == 0)
          {
              var items = this.getItems();

              var newItems = this.rotateItemBack(items);
              this.removeAll(false, false);
              this.add(newItems);

              this.setActiveItem(1);
              this.refresh();
          }

          else if(activeIndex == maxIndex)
          {
              var items = this.getItems();

              var newItems = this.rotateItemFront(items);
              this.removeAll(false, false);
              this.add(newItems);

              this.setActiveItem(maxIndex-1);
              this.refresh();
          }      
        }
    }
  }

});

Ext.define（'myApp.view.InfCarousel'{
xtype:'传送带'，
扩展：“Ext.carousel.carousel”，
旋转包装：功能（项目）{
如果（！item）返回空值；
var initem=item.items；
var numitems=initem.length；
var newItem=[]；
newItem.push（initem[numitems-1]）；
对于（i=0；我能用你的html、css等发布一个提琴吗？你可以创建一个sencha touch提琴！请先阅读我的问题。我的问题不是从最后一个到第一个或从第一个到最后一个，我的问题是在这两张幻灯片中，幻灯片效果不起作用……@rafi：另外请知道在这种情况下，
滑动
不是一个好的事件ion.实际上
Ext.Carousel
使用了
dragstart
和
dragend
事件，这些事件与
swipe
手势有本质的不同。是的，我看到了dragstart/end事件，并尝试过使用它们，但没有成功。我也尝试过创建senchabiddle，但很难创建一个。无论如何感谢您的帮助刚刚更新了我的答案，添加了更多的解释，请更深入地了解它。请先阅读我的问题。我的问题不是从最后一张到第一张或从第一张到最后一张，我的问题是在那两张幻灯片中，幻灯片效果不起作用……这就是我要说的-幻灯片不起作用，因为它试图同时移动两张图像-但是不行这两个图像不是相邻的，所以这是不可能的。为了让它们一起移动，你必须伪造下一个图像。如果你可以将完整的代码以小提琴的形式发布，这可能会有助于解释。如果我伪造它们，从4到1再到2，或者从1到3再到2再到2，怎么样。。。
Ext.define('myApp.view.InfCarousel',{
  xtype: 'InfCarousel',
  extend: 'Ext.carousel.Carousel',

  rotateItemBack: function(item){
    if(!item) return null;
    var initem = item.items;
    var numitems = initem.length;
    var newItem = [];

    newItem.push(initem[numitems-1]);
    for(i=0; i<numitems-1; ++i)
      newItem.push(initem[i]);

    return newItem;
  },

  rotateItemFront: function(item){
    if(!item) return null;
    var initem = item.items;
    var numitems = initem.length;
    var newItem = [];

    for(i=0; i<numitems-1; ++i)
      newItem.push(initem[i+1]);

    newItem.push(initem[0]);

    return newItem;
  },

  config:{
    indicator: false,
    listeners:{
        activeitemchange:function(){
            this.fireEvent('activeitemchangeloop', arguments);
        },

        activeitemchangeloop: function ()
        {
          var activeIndex = this.getActiveIndex(),
              maxIndex = this.getMaxItemIndex();

          if(activeIndex == 0)
          {
              var items = this.getItems();

              var newItems = this.rotateItemBack(items);
              this.removeAll(false, false);
              this.add(newItems);

              this.setActiveItem(1);
              this.refresh();
          }

          else if(activeIndex == maxIndex)
          {
              var items = this.getItems();

              var newItems = this.rotateItemFront(items);
              this.removeAll(false, false);
              this.add(newItems);

              this.setActiveItem(maxIndex-1);
              this.refresh();
          }      
        }
    }
  }

});