幻灯片效果不起作用

Posted 2023-02-25

【中文标题】幻灯片效果不起作用

【英文标题】：Slide Effect Not Working

【发布时间】：2013-10-05 07:18:51

【问题描述】：

我创建了一个带有无限滑动选项的轮播。如果用户从最后一个项目向左滑动，将出现第一个项目，如果从第一个项目向右滑动，将出现最后一个项目。滑动效果适用于每个滑动事件，但滑动效果在从最后一项滑动到第一项以及从第一项滑动到最后一项时不起作用。这是我的代码-

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'”虽然不起作用。我试图找到这个解决方案很长一段时间，超过 2 周，但仍然没有解决方案。有什么soltinpolease吗？

【问题讨论】：

你能发个小提琴吗？

用你的html、css等...

Here 你可以创建一个煎茶触摸小提琴！

【参考方案1】：

我假设您实际上在 dom 中没有以正确顺序显示此幻灯片动画的图像。 例如：

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

如果你想从 img 4 滑动到 img1，你首先必须在 dom 中的 img 4 之后放置 img 1，这样它们就可以很好地彼此相邻 - 你可以通过继续移动每个项目来做到这一点或者只是在开始和结束处复制第一个和最后一个项目，一旦动画完成，跳回实际项目：

从 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>

制作动画时：

<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>

动画完成后（跳转到实际图片 1）

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

【讨论】：

请先阅读我的问题。我的问题不是从最后一个到第一个或从第一个到最后，我的问题是在那两张幻灯片中，幻灯片效果不起作用....

这就是我要说的——幻灯片无法工作，因为它试图同时移动两个图像——但是这两个图像并不相邻，所以这是不可能的。为了让它们一起移动，您必须伪造 next 图像。如果您可以在小提琴中发布您的完整代码，它可能有助于解释。

如果我假装他们从 4 到 1 后去 2 或者从 1 到 2 去 3...

【参考方案2】：

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

Ext.Carousel 中的项目轮换事件是 dragstart 和 dragend，而不是 swipe。它们的性质完全不同。

animateActiveItem 不是在轮播中的项目之间设置动画的正确操作。

当您从右到左“拖动”到最后一项时，您无法“预览”第一项，因为它不存在。

这是Ext.Carousel 的工作覆盖。它完全符合您的要求。基本上它的想法是“旋转”轮播的items 配置，然后强制刷新。

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.Carousel的源代码，这里：http://docs-origin.sencha.com/touch/2.3.0/source/Carousel.html#Ext-carousel-Carousel（深入了解next和previous方法）

【讨论】：

请先阅读我的问题。我的问题不是从最后一个到第一个或从第一个到最后，我的问题是在那两张幻灯片中，幻灯片效果不起作用....

@rafi：另外请注意swipe 在这种情况下不是一个好听的事件。实际上Ext.Carousel 使用dragstart 和dragend 事件，这与swipe 手势有本质的不同。

是的，我已经看到了 dragstart/end 事件，我尝试使用这些但不能。我也尝试创建 senchafiddle，但很难创建一个。无论如何感谢您的帮助

我刚刚更新了我的答案，提供了更多解释，请深入了解