Question

所以我才刚刚开始使用Slick Slider。效果很好，但是在切换幻灯片后我无法在html5音频播放器中更改src。我不知道如何执行此功能。有两个轮播彼此同步。

<div>
    <audio controls class="musicplayer" id="oned">
        <source id="song1" src="#" type="audio/mpeg"></source>
        <source id="song2" src="#" type="audio/mpeg"></source>
    </audio>
</div>

<div class="soapboxes" id="wrapper">
    <div><img src="images/pink and yellow trend@0.75x.png" class="pinkandyellow" alt="slider image" align="center"  ></div>
    <div><img src="images/green trend@0.75x.png" alt="slider image" align="center" ></div>
    <div><img src="images/red trend@0.75x.png" alt="slider image" align="center" ></div>
    <div><img src="images/pink trend@0.75x.png" alt="slider image" align="center" ></div>
</div>

<div class="music" id="wrapper">
    <div><p>Blah</p></div>
    <div><p>Blah1</p></div>
    <div><p>Blah2</p></div>
    <div><p>Blah3</p></div>
</div>

<script type= "text/javascript">
    $(document).ready(function() {
        $('.soapboxes').slick({
            dots: true,
            arrows: true,
            autoplay: false,
            centerMode: true,
            mobileFirst: true,
            initialSlide: 1,
            slidesToScroll:1,
            asNavFor: '.music',
            slidesToShow: 3,
        });
    });
</script>

<script type= "text/javascript">
    $(document).ready(function() {
        $('.music').slick({
            dots: false,
            arrows: true,
            autoplay: false,
            centerMode: true,
            accessibility: true,
            mobileFirst: true,
            initialSlide: 1,
            asNavFor:'.soapboxes'
        });
    });
</script>

如果轮播幻灯片中包含图片滑动，我希望音频播放器的src会发生变化

Answer 1

任何值得称赞的jQuery插件都有documentation作为选项和方法。通常，我们首先会查看是否有一个方便使用音频文件的选项……不是，因此，然后寻找绑定到事件（通常称为“事件” 或“回调” 。在“事件” 下的Settings section中，有几个自定义事件。当挂接到滑块类型插件的自定义事件时，最好找到一个事件与往返幻灯片相关-

我们将使用 beforeChange 事件，该事件会在更换幻灯片之前触发。
我们必须编写我们自己的回调函数，才能在用户转到下一张幻灯片时（实际上是<audio>标签的 src 值） beforeChange 事件发生时。）
签名：
```
$(SELECTOR).on('beforeChange', CALLBACK); 
```
演示：
```
$(".music").on("beforeChange", playlist);
```

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet">
  <style>
    body {
      overflow-x: hidden;
    }
    
    main {
      width: 100vw;
    }
    
    .slider,
    img {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    
    .player {
      width: 320px;
    }
  </style>
</head>

<body>
  <main>
    <div class="main slider">
      <div><img src="http://placeimg.com/320/180/people" alt="slider image"></div>
      <div><img src="http://placeimg.com/320/180/nature" alt="slider image"></div>
      <div><img src="http://placeimg.com/320/180/animals" alt="slider image"></div>
    </div>

    <div class="music slider">
      <div>Dog Days</div>
      <div>Jerky</div>
      <div>Righteous</div>
    </div>

    <audio class='player slider' src='http://soundbible.com/mp3/chinese-gong-daniel_simon.mp3' controls></audio>
  </main>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <script>
    $('.main').slick({
      arrows: false,
      mobileFirst: true,
      asNavFor: '.music'
    });

    $('.music').slick({
      mobileFirst: true,
      asNavFor: '.main'
    });

    $('.music').on('beforeChange', playlist);

    function playlist(e, s, current, next) {

      var list = [
        'https://glsbx.s3.amazonaws.com/-/dd.mp3',
        'https://od.lk/s/NzlfOTEyMzgyNF8/jerky.mp3',
        'https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3'
      ];

      $('.player')[0].src = list[next];
      $('.player')[0].load();
      $('.player')[0].play();

    }
  </script>
</body>

</html>

更换幻灯片后如何更改音频源？

1 个答案: