Javascript 如何使用切片盒_Javascript_Jquery_Html

Javascript 如何使用切片盒

javascript jquery html

Javascript 如何使用切片盒,javascript,jquery,html,Javascript,Jquery,Html,我试图让slicebox在测试页面中工作。从文档中可以看出，我似乎需要使用slicebox css文件，并将jquery脚本与slicebox.js链接起来。从那以后，我认为调用脚本中的函数就像调用“$（'#sb slider'）.slicebox（）中的函数一样简单；但是图片甚至都没有显示出来 <!DOCTYPE html> <html lang="en"> <head> <title>Slicebox Test</title

我试图让slicebox在测试页面中工作。从文档中可以看出，我似乎需要使用slicebox css文件，并将jquery脚本与slicebox.js链接起来。从那以后，我认为调用脚本中的函数就像调用“$（'#sb slider'）.slicebox（）中的函数一样简单；但是图片甚至都没有显示出来

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>Slicebox Test</title>
    <link rel="stylesheet" type="text/css" href="css/slicebox.css" />
</head>
<body>
    <ul id="sb-slider" class="sb-slider">
        <li>
            <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/1.jpg" alt="image1"/></a>
        </li>
        <li>
            <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
        </li>
        <li>
            <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
        </li>
        <li>
            <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
        </li>
        <li>
            <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
        </li>
        <li>
            <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
        </li>
        <li>
            <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
        </li>
    </ul>

    <div>
        <a href="#">Next</a>
        <a href="#">Previous</a>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.slicebox.js"></script>
    <script type="text/javascript">
     $("#sb-slider").slicebox();
    </script>
  </body>
  </html>


切片盒试验
















$（“#sb滑块”）.slicebox（）；

您确实需要添加一个ready函数

$(document).ready(function() {
    $("#sb-slider").slicebox();
});

我认为您还需要在其中链接包含的modernizer脚本

<script type="text/javascript" src="/scripts/modernizr.custom.46884.js"></script>

我可以使用它，但不是在所有浏览器/平台上都可以使用。

这个文件夹中有css和js吗？ css/slicebox.css js/jquery.slicebox.js

也许这就是问题所在。你必须下载并将其放入该文件夹中，我添加了该文件夹，但问题仍然存在，我的图像都没有显示。我不知道该插件是否依赖于我不知道的其他CSS文件，因为如果我取出class=“sb”滑块“图像出现了，但显然没有效果。Firebug似乎不这么认为。我现在让它完全工作了，所有浏览器。然而，有些人不得不使用优雅的语言。