0

我正在尝试使用http://mozilla.github.io/brick/demos/slidebox/index.html，以下是我的代码。第一张幻灯片加载正常，但是当我单击下一个按钮时，它会出现以下错误。请帮忙！！！

ReferenceError: slidebox is not defined

我很困惑我做错了什么？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-US" class="csstransforms csstransforms3d csstransitions" slick-uniqueid="3">
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/brick-1.0beta8.byob.min.css"/>
<script type="text/javascript" src="js/brick-1.0beta8.byob.min.js"></script>

<script>


$(document).ready(function() { 

// go back a slide
prevButton.addEventListener("click", function(){
   slidebox.slidePrevious(); 
});

// go forward a slide
nextButton.addEventListener("click", function(){
   slidebox.slideNext(); 
});

// jump to slide 6
slideToButton.addEventListener("click", function(){
   slidebox.slideTo(6); 
});

 });

</script>

<head>
<body>
<x-slidebox orientation="x">
    <x-slides>
        <x-slide>Slide 0</x-slide>
        <x-slide selected>Slide 1
        </x-slide>
        <x-slide>Slide 2</x-slide>
        <x-slide>Slide 3</x-slide>
        <x-slide>Slide 4</x-slide>
        <x-slide>Slide 5</x-slide>
        <x-slide>Slide 6</x-slide>
    </x-slides>
</x-slidebox>

<button id="nextButton" class="btn btn-default nextButton">Next</button>
<button id="slideToButton" class="btn btn-default slideToButton">Pre</button>

<button id="prevButton" class="btn btn-default prevButton">Pre</button>
<button onclick="ab();" id="pre" class="pre">Next</button>
</body>
</html>
4

1 回答 1

1

您需要先查询滑动框。在附加事件侦听器之前添加它。

var slidebox = $('x-slidebox')[0];

您还需要在使用按钮之前查询它们。

$('nextButton').addEventListener("click", function(){
   slidebox.slideNext(); 
});

这是应该工作的完整js代码。

https://gist.github.com/pennyfx/6896373

正如我上面提到的，您缺少的部分是您必须在使用它们之前从 DOM 中选择滑动框和按钮元素。我假设 Brick 的作者认为这部分是显而易见的，并将其从他们的教程中删除。

于 2013-10-08T23:18:23.130 回答