Question

我在Facebook上制作自定义页面，在画布选项卡上使用FBML和JavaScript。

我想制作一个像jQuery一样的滑块，不幸的是Facebook还没有jQuery支持，所以我想我会用普通的旧JavaScript制作幻灯片。

使用slide()函数一次后，Firebug控制台中出现“slide（）不是函数”错误。

以下是代码：

<script>
    <!--
        function slide(reqPos){
            desSlideState = reqPos;
            curSlideState = getCurSlideState();
            toSlide = desSlideState - curSlideState;
            pxToSlide = toSlide * (-520);

            movCount = 0;
            timer = setInterval(function(){eSlide(slide, pxToSlide);},100);
        }
        function getCurSlideState(){
            slide = document.getElementById("slider");
            var slideLeft = slide.getStyle("left");
            var slideLeft = parseFloat(slideLeft);
            var slideState = slideLeft/-520;
            return slideState;
        }
        function eSlide(elemToMove, lengthToMove){
            curLeft = elemToMove.getStyle("left");
            curLeft = parseFloat(curLeft);

            newLeft = curLeft + (lengthToMove/10);
            elemToMove.setStyle("left", newLeft + "px");

            movCount++;

            if(movCount == 10){
                clearInterval(timer);
                return false;
            }
        }
    //-->
</script>

<div id="fb-wrapper">
    <h1>Loads Solutions LTD</h1>

    <div class="loads-nav-wrap">

      <div class="fb-nav" id="nav1"><a href="http://www.loads.co.il/hosting.php" onclick="slide(0); return false;">Server<br />Hosting</a><div></div></div>

      <div class="fb-nav" id="nav2"><a href="http://www.loads.co.il/dedicated.php" onclick="slide(1); return false;">Dedicated<br />Servers</a><div></div></div>

      <div class="fb-nav" id="nav3"><a href="http://www.vcp.co.il/" onclick="slide(2); return false;">Web Design<br />&Development</a><div></div></div>

      <div class="fb-nav" id="nav4"><a href="http://www.loads.co.il/vps.php" onclick="slide(3); return false;">VPS</a><div></div></div>

      <div class="fb-nav" id="nav5"><a href="http://www.loads.co.il/exchange.php" onclick="slide(4); return false;">Exchange MailBoxes</a><div></div></div>
</div>

<div id="content-slide">
    <div id="slider" style="left:0">
        <div class="slide-content">
            <h3 id="test-id">content1</h3>
        </div>
        <div class="slide-content">
            <h3>content2</h3>
        </div>
        <div class="slide-content">
            <h3>content3</h3>
        </div>
        <div class="slide-content">
            <h3>content4</h3>
        </div>
        <div class="slide-content">
            <h3>content5</h3>
        </div>
    </div>
</div>

不要担心HTML无效，否则Facebook画布不起作用。

Answer 1

这一行是覆盖您的slide函数：

slide = document.getElementById("slider");

您需要var才能将其设为本地，如下所示：

var slide = document.getElementById("slider");

如果没有var，它会将其设置为全局变量...覆盖之前的slide函数。声明局部变量时始终放置var，否则可能会导致全局冲突，就像在此处一样。

Facebook页面JavaScript：无法重用功能

1 个答案: