Question

我正在尝试制作一个滑动滑块，每次用户在移动设备上进行滑动时，该滑动滑块都会更改声音云中嵌入的音乐。我尝试了许多不同的方法来在滑动后停止并播放音乐。这是我的刷卡每张图像的代码我想要在滑动时打开音乐并在下一次滑动时开始新曲目的功能。并在前一次滑动时再次播放上一首嵌入的歌曲。

 <div data-role="page" id="article1">
<img src="img/01.jpg"/>
</div>

<div data-role="page" id="article2">

<iframe id="denied"  allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/728553000&color=%23000000&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
    <img src="img/02.jpg"/>

 </div>

<div data-role="page" id="article3">
           <iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe>

        <img src="img/03.jpg"/>

</div>

<div data-role="page" id="article3">
<iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe>

    <img src="img/04.jpg"/>
</div>

JS代码，我认为这需要解决

$(document).on('swipeleft', '.ui-page', function(event){
    if(event.handled !== true) // This will prevent event triggering more 
then once
   {
       var nextpage = $.mobile.activePage.next('[data-role="page"]');
       // swipe using id of next page if exists
       if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: 
false}, true, true);
    }
       event.handled = true;
}
   return false;
});

$(document).on('swiperight', '.ui-page', function(event){
   if(event.handled !== true) // This will prevent event triggering more 
then once
   {
      var prevpage = $(this).prev('[data-role="page"]');
     if (prevpage.length > 0) {
         $.mobile.changePage(prevpage, {transition: "slide", reverse: 
true}, true, true);
      }
      event.handled = true;
  }
  return false;
 });

滑动下一首图像播放下一首歌曲

0 个答案: