-1

下面的代码是我的音乐页面的通用模板。

幻灯片按顺序向前或向后移动歌曲/图片库，但遗憾的是，“ switchFeature”功能应该允许您跳转到侧边栏中列出的各种曲调，但似乎不起作用。

谁能指出我的错误在哪里，或者需要做些什么才能使它起作用？谢谢！

<!-- music.php -->

<?php require 'header.php' ?>

    <script type="text/javascript">

    $(document).ready(function() {

        $(".tuneslides").hide();
        var idName = ["#tune1", "#tune2"];
        var indexNum = 0;
        $(idName[0]).fadeIn(1000);

        $("#slidenext").click(function() {
            $(idName[indexNum]).fadeOut(300, function() {
                indexNum++; 
                if (indexNum > 1) {indexNum = 0;}
                $(idName[indexNum]).fadeIn(500);
            });
        });

        $("#slideback").click(function() {
            $(idName[indexNum]).fadeOut(300, function() {
                if (indexNum == 0) {indexNum = 1;}
                else {indexNum--;}  
                $(idName[indexNum]).fadeIn(500);
            });
        });

        // alas...
        function switchFeature (newIndexNum) {
            $(idName[indexNum]).fadeOut(300, function() {
                $(idName[newIndexNum]).fadeIn(500);
                indexNum = newIndexNum;
            });
        };

    });

    </script>


<div id="sidebar">

<h2>Featured Tunes<br>(click to show)</h2>

<p onclick="switchFeature(0)">Tune 1</p>
<p onclick="switchFeature(1)">Tune 2</p>

</div><!--sidebar-->    

<div id="main">

<div id="slideshow">

    <div id="slideback">Previous</div>
    <div id="slidenext">Next</div>

    <div class="tuneslides" id="tune1">
        <p class="tsTitles">Tune 1 </p>
        <audio controls>
            <source src="music/tune1.mp3" type="audio/mpeg">
            <img src="images/image1.jpg"/>
        </audio>
    </div>

    <div class="tuneslides" id="tune2">
        <p class="tsTitles">Tune 2</p>
        <audio controls>
            <source src="music/tune2.mp3" type="audio/mpeg">
            <img src="images/image2.jpg"/>
        </audio>
    </div>

</div> <!-- slideshow -->

</div><!--main-->

<?php require 'footer.php' ?>
4

2 回答 2

2

您定义switchFeature的范围内

$(document).ready(function(){
});

switchFeature当 onclick 事件试图调用时，含义在不同的范围内。

尝试像下面这样定义你的函数，看看它是否有效：

window.switchFeature = function(newIndexNum) {
   $(idName[indexNum]).fadeOut(300, function() {
      $(idName[newIndexNum]).fadeIn(500);
      indexNum = newIndexNum;
   });
 };
于 2013-08-19T17:39:48.580 回答
1

我会稍微重写一下，这样你就不必做onclicks，你可以把所有东西放在一起。更改onclicks以使用类和 html5 数据：

<p class="tune" data-player="0">Tune 1</p>
<p class="tune" data-player="1">Tune 2</p>

然后将该函数 switchFeature 转换为 tune 类的单击：

$('.tune').click(function() {
  var newIndexNum = $(this).attr('data-player');  
  $(idName[indexNum]).fadeOut(300, function() {
    $(idName[newIndexNum]).fadeIn(500);
    indexNum = newIndexNum;
  });
});

代码笔： http ://codepen.io/maxwbailey/pen/iKxCo

于 2013-08-19T17:55:41.350 回答