Question

我承认，这不是最好的头衔，但我会尝试补偿解释。

我想创建一个类似于Carousel（但不完全）的画廊，其中的图像在点击元素后会自动快速导航，就像旋转器一样。

所有图像都是由服务器端语言随机化并加载到DOM中，内联，只有第一个可见并且隐藏隐藏。我的想法是使用CSS动画将它们旋转到左侧并且它工作得非常好，即使我无法在the Fiddle中重现它。

由于我被迫复制代码，所以这里是：

＆＃13;

$( document ).ready( function() {

  $( '#randomizer .wheel' ).on( 'click', function() {

      /**
       * @internal
       *
       * 70 is the upper bound of the range and 50 the lower bound
       *
       * @see https://stackoverflow.com/a/7228322/5613506
       */
      var time = Math.floor( Math.random() * ( 70 - 50 + 1 ) + 50 );

      var selector = $( '#randomizer .wheel div, #images > div' );

      selector.addClass( 'spinning' )
              .css( '--spinner-animation-time', time + 'ms' )
              .on( 'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
                  selector.removeClass( 'spinning' )
              });
  });
});

＆＃13;

:root {
  --spinner-animation-time: 200ms;
}

.row {
    overflow: hidden;
    width: 33.333333%;
}

#randomizer {
    height: 12vh;
    margin-top: 0.1vh;
    position: relative;
    z-index: 4;
}

    #randomizer .wheel {
        -webkit-border-top-left-radius: 0;
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-topright: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: none !important;
        padding: 2vh 0 1.5vh 0;
    }

    #randomizer .wheel > div {
        height: 8.4vh;
        overflow: hidden;
        position: relative;
        -webkit-transform: translate3d( 0, 0, 0 );  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translate3d( 0, 0, 0 );  /* IE 9 */
                transform: translate3d( 0, 0, 0 );  /* Firefox 16+, IE 10+, Opera */
        width: 95vw; /** 4 white blocks with their black borders visible */
    }

        #randomizer .wheel img {
            cursor: pointer;
            object-fit: cover;
            position: relative;
            top: 0.1vh;
            width: 55vw;
        }

            /*#randomizer .wheel img:hover {
                animation: randomizer 100ms 10;
            }*/
            
#images {
  align-items: center;
  border: 1px solid #000;
  display: inline-flex;
  justify-content: center;
  height: 300px;
  margin-top: 6vh;
  position: absolute;
  width: 450px;
  z-index: 3;
}

#images div {
  display: inline-flex;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

    #images img {
      /*clip-path: inset( 9.2vh 1.2vw 24.5vh 4.7vw );*/
      /*transform: scale( 0.8, 1 );*/
      height: 100%;
      width: 100%;
    }

    #images .spinning img {
      animation: randomizer var(--spinner-animation-time) 25;
    }

#randomizer .wheel > div.spinning img {
  animation: randomizer var(--spinner-animation-time) 25;
}

@keyframes randomizer {
  100% {
    -webkit-transform: translateX( -33.3333% );  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX( -33.3333% );  /* IE 9 */
            transform: translateX( -33.3333% );  /* Firefox 16+, IE 10+, Opera */
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images">
    <div>
        <img src="http://brightcove04.o.brightcove.com/1362235914001/1362235914001_4806146059001_video-still-for-video-4805957335001.jpg?pubId=1362235914001" />
        <img src="https://oup.useremarkable.com/production/images/uploads/3315/original/email-symbol-thumbnail.jpg?1473424084" />
        <img src="https://i.ytimg.com/vi/xYrRq5U5kcc/maxresdefault.jpg" />
        <img src="https://oup.useremarkable.com/production/images/uploads/2998/original/plus-sign-thumbnail.jpg?1471959737" />
        <img src="https://oup.useremarkable.com/production/images/uploads/2816/original/crossword-thumbnail.jpg?1471959676" />
    </div>
</div>
  
<div class="row" id="randomizer">

    <div class="wheel">
        <div>
            <img src="https://i.imgur.com/ikch8mX.jpg" />
        </div>
    </div>

</div>

＆＃13;

即使它只在这个演示中强调了（让我们强调一下），可能是因为我无法提取我在我的所做的一切真实的代码，我相信它应该足以让你理解这个概念。

然而，这只是一个简单的动画，它从0％到100％完成。即使图像＆＃39;列表被随机播放，动画将开始显示第一个图像并结束显示第一个图像。

我想真正旋转所有图像，随意停止其中一个图像。来自＆＃34;选择＆＃34;我可以读取一些数据属性作为AJAX参数使用，但除此之外还有。

我尝试使用我今天学到的东西（CSS变量）生成一个随机动画速度值，但最后，我得到的只是一种模拟一个人攻击旋转器的强度的方法，更难或更轻，旋转或多或少的时间。

我怎么能做到这一点？

Answer 1

我提出了一个解决方案，我相信可以帮助您解决问题。

由于大部分动画都是视觉技巧，正如你自己所说，动画再次从第一张图像转到第一张图像，所有你需要的就是移动DOM节点。

在动画运行时，您选择一个随机图像节点，将其从其位置移除，当动画结束时，您将其重新添加到顶部。通过足够快的动画定义，人眼几乎看不到丢失的图像。

＆＃13;

$( document ).ready( function() {

    $( '#randomizer .wheel' ).on( 'click', function() {
	
  	var $images = $( '#images div' );
      
      	/**
         * @internal
         *
         * Choosing a random image from all available. When the spinning
         * animation is finished we remove it from it is and then prepend to
         * the Images container.
         *
         * Since the animation goes from the first image to the first image
         * we have the visual illusion of randomness ;)
         */
         var chosen = $images.find( 'img' ).eq( Math.floor( Math.random() * 10 ) );

         var selector = $( '#randomizer .wheel div, #images > div' );

         selector.addClass( 'spinning' )
                 .on( 'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {

             chosen.remove().prependTo( $images );

             selector.removeClass( 'spinning' )
         });
     });
});

＆＃13;

body {
    margin: 2% auto;
    text-align: center;
}

.row {
    overflow: hidden;
}

#randomizer {
    display: flex;
    height: 12vh;
    justify-content: center;
}

    #randomizer .wheel {
        -webkit-border-top-left-radius: 0;
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-topright: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: none !important;
        padding: 2vh 0 1.5vh 0;
    }

    #randomizer .wheel > div {
        height: 9.2vh;
        overflow: hidden;
        position: relative;
        -webkit-transform: translate3d( 0, 0, 0 );  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translate3d( 0, 0, 0 );  /* IE 9 */
                transform: translate3d( 0, 0, 0 );  /* Firefox 16+, IE 10+, Opera */
        width: 15.9vw; /** 4 white blocks with their black borders visible */
    }

        #randomizer .wheel img {
            cursor: pointer;
            object-fit: cover;
            position: relative;
            top: 0.1vh;
            width: 55vw;
        }
            
#images {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    top: 15vh;
}

#images div {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    height: 250px; /** Images' Height — required by Firefox */
    overflow: hidden;
    width: 350px; /** Images' Width */
}

    #images img {
        height: 100%;
        width: 100%;

        /**
         * @see https://stackoverflow.com/a/42240538/5613506
         */
        will-change: transform;
    }

    #images .spinning img {
        animation-name: images;
        animation-duration: .6s;
        animation-iteration-count: 3;
    }

#randomizer .wheel > div.spinning img {
    -webkit-animation: randomizer .2s 8;
            animation: randomizer .2s 8;
}

@keyframes images {
      0% { transform: translateX( 0px );     }
     10% { transform: translateX( -350px );  }
     20% { transform: translateX( -700px ); }
     30% { transform: translateX( -1050px ); }
     40% { transform: translateX( -1400px ); }
     50% { transform: translateX( -1750px ); }
     60% { transform: translateX( -2100px ); }
     70% { transform: translateX( -2450px ); }
     80% { transform: translateX( -2800px ); }
     90% { transform: translateX( -3150px ); }
    100% { transform: translateX( 0px );     }
}

@keyframes randomizer {
    100% {
        -webkit-transform: translateX( -50% );
                transform: translateX( -50% );
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

    <div id="images">
        <div>
            <img src="https://demo.goodlayers.com/traveltour/citytour/wp-content/uploads/2017/07/shutterstock_14717125-700x500.jpg" />
            <img src="http://www.jomkembara.com/wp-content/uploads/2016/06/shutterstock_178807262-700x500.jpg" />
            <img src="https://inalentejo.com/wp-content/uploads/2017/01/almendres2-700x500.jpg" />
            <img src="http://www.narayanitours.com/wp-content/uploads/2017/07/delhi-mathura-jaipur-golden-trinagle-700x500.jpg" />
            <img src="http://files.fobby.net/0000/4e60/ultimatechimera.png" />
            <img src="https://i1.wp.com/www.travellingmachupicchu.com/wp-content/uploads/2017/06/machupicchu16-travelling-machu-picchu-1800x844px.jpg?resize=700%2C500&ssl=1" />
            <img src="http://indiatravel.nl/wp-content/uploads/2017/11/tiger-in-india-700x500.jpeg" />
            <img src="http://peruandinatours.com/wp-content/uploads/2017/07/aramu-muro-1-700x500.jpg" />
            <img src="http://files.fobby.net/0000/8930/halloween02.jpg" />
            <img src="https://www.tourwithtony.com/wp-content/uploads/2017/07/golden-gate-700x500.jpg" />
        </div>
    </div>

    <div id="randomizer">
    
        <div class="wheel">
            <div>
                <img src="https://i.imgur.com/ikch8mX.jpg" />
            </div>
        </div>
      
    </div>

</div>

＆＃13;

现在有些解释

首先，所有图像必须具有相同的尺寸，或者至少具有相同的宽度，因为我们正在操纵水平轴。

在这里，我通过每10％添加一个停止点来扩展你的关键帧定义，这是100个关键帧除以10个图像，加上起点。

这里的技巧是将X轴平移为图像的宽度，负向和递增。

考虑使用的图片，从Google图片搜索中随机挑选，它的0（零）为起点（第一张图片），然后-700px显示第二张图片，{ {1}}为第二个，依此类推，直到最后一个停止（100％），我们再次设置为零以返回第一个图像。

然而，在下面的演示中，我逐步增加了 350px ，50％的图像＆＃39;宽度，因为我在这里编码，在这个微小的空间＆gt;。＆lt;

确保在图像中反映这些尺寸＆＃39;容器 - -1400px

然后是速度部分。我使用#images div代替使用CSS变量，通过它我可以控制动画运行的次数。这个非常小的animation-iteration-count导致了一个相当不错的图像随机函数。

您可以执行您正在执行的操作来模拟敲击强度。事实上，我这样做了，但由于范围比用于毫秒生成的范围小得多，所以它有点难看，所以我倾向于把它说出来。

您可能需要做的唯一事情是调整旋转轮的相同属性，使它们在视觉上匹配，因此当一个停止其他停止时。

希望有所帮助：）

动画随机图像微调器

1 个答案: