Fatal编程技术网
  • javascript/
  • Javascript 如何实现切片盒？I'；我有困难

Javascript 如何实现切片盒？I'；我有困难

javascript jquery

Javascript 如何实现切片盒？I'；我有困难,javascript,jquery,shadowbox,Javascript,Jquery,Shadowbox,我试图在我的网站上实现Slicebox，但我遇到了一些问题。我总是想在同一个页面中为用户提供Shadowbox选项，所以我正在初始化这两个选项 <!-- Shadowbox code. --> <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" /> <script type="text/javas

我试图在我的网站上实现Slicebox，但我遇到了一些问题。我总是想在同一个页面中为用户提供Shadowbox选项，所以我正在初始化这两个选项

        <!-- Shadowbox code. -->
        <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            Shadowbox.init();
        </script>

        <!-- Slicebox Code -->
        <script type="text/javascript">
            $('.sb-slider').slicebox();
        </script>


Shadowbox.init（）；
$（'.sb滑块'）.slicebox（）；
但我不知道如何让它在实际页面中工作。我有这个链接，还有这些图片

    <script type="text/javascript" src="javascript/scripts.js"></script>
    <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>
及
我把它放在正确的目录里了吗

任何帮助都将不胜感激，谢谢

完整HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

        <!-- This tag is required to make the page valid XHTML. -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <!-- Give your page a title. -->
        <title>Photo Gallery for NBC's Community</title>

        <!-- Put your name and a description of the assignment or project here. -->
        <meta name="author" content="" />
        <meta name="description" content="A collection of photos regarding NBC's Community television show." />

        <!-- This links to a sample CSS file. -->
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

        <!-- This include a standard jQuery library and a sample JS file for your own code. -->
        <script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
        <script type="text/javascript" src="javascript/scripts.js"></script>
        <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>

        <!-- Shadowbox code. -->
        <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            Shadowbox.init();
        </script>

        <!-- Slicebox Code -->
        <script type="text/javascript">
            $('.sb-slider').slicebox();
        </script>

    </head>

    <body>
        <div id="wrap">
            <div id="header">
                <img src="media/header.png" alt="Community Header" />
            </div>

            <p>Community is an American television comedy series created by Dan Harmon that airs on NBC. The series is about a group of students at a community college in the fictional locale of Greendale, Colorado. The series heavily uses meta-humor and pop culture references, often parodying film and television clichés and tropes. The series premiered Thursday, September 17, 2009, and airs in the 8:00 pm ET time slot. It previously aired in the 9:30 pm ET time slot, beginning with its premiere, but later relocated with its fourth episode. On March 17, 2011, NBC renewed Community for a third season, which premiered on September 22, 2011.</p>

            <div class="sb-slider">
                <img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
                <img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
                <img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
            </div>

            <div id="gallery">
                <table>
                    <tr><td><a href="media/community/fullsize/abed_annie_troy.jpg" rel="shadowbox[Gallery]" title="Abed, Annie and Troy"><img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /></a></td><td><a href="media/community/fullsize/annie_paintball.jpg" rel="shadowbox[Gallery]" title="Annie playing paintball"><img src="media/community/thumbnails/annie_paintball.jpg" alt="Annie during the first paintball episode" /></a></td><td><a href="media/community/fullsize/annie.jpg" rel="shadowbox[Gallery]" title="Annie's Halloween costume"><img src="media/community/thumbnails/annie.jpg" alt="Annie as a skeleton" /></a></td><td><a href="media/community/fullsize/britta_dinosaur.jpg" rel="shadowbox[Gallery]" title="Jeff's and Britta's Halloween costumes"><img src="media/community/thumbnails/britta_dinosaur.jpg" alt="Britta's and Jeff's Halloween costumes" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/cast_cafeteria.jpg" rel="shadowbox[Gallery]" title="In the cafeteria"><img src="media/community/thumbnails/cast_cafeteria.jpg" alt="The cast in the cafeteria" /></a></td><td><a href="media/community/fullsize/cast_class.jpg" rel="shadowbox[Gallery]" title="In the classroom"><img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /></a></td><td><a href="media/community/fullsize/cast_cloud.jpg" rel="shadowbox[Gallery]" title="Thinking"><img src="media/community/thumbnails/cast_cloud.jpg" alt="The cast thinking" /></a></td><td><a href="media/community/fullsize/cast_mural.jpg" rel="shadowbox[Gallery]" title="In front of a colorful chalkboard"><img src="media/community/thumbnails/cast_mural.jpg" alt="Cast in front of a chalkboard" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/cast_study_room.jpg" rel="shadowbox[Gallery]" title="Hanging in the study room"><img src="media/community/thumbnails/cast_study_room.jpg" alt="The cast in their study room" /></a></td><td><a href="media/community/fullsize/cast.jpg" rel="shadowbox[Gallery]" title="In the library"><img src="media/community/thumbnails/cast.jpg" alt="The cast" /></a></td><td><a href="media/community/fullsize/christmas_episode.jpg" rel="shadowbox[Gallery]" title="Transformed into Christmasy claymation characters"><img src="media/community/thumbnails/christmas_episode.jpg" alt="Claymation Christmas episode" /></a></td><td><a href="media/community/fullsize/pierce.jpg" rel="shadowbox[Gallery]" title="Pierce hears something!"><img src="media/community/thumbnails/pierce.jpg" alt="Pierce with other students" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/season_3.jpg" rel="shadowbox[Gallery]" title="The introduction to season 3"><img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /></a></td><td><a href="media/community/fullsize/show_poster.jpg" rel="shadowbox[Gallery]" title="The classic Community poster"><img src="media/community/thumbnails/show_poster.jpg" alt="Poster for the show" /></a></td><td><a href="media/community/fullsize/troy_and_abed.jpg" rel="shadowbox[Gallery]" title="Troy and Abed In the Morning!"><img src="media/community/thumbnails/troy_and_abed.jpg" alt="Troy and Abed In The Morning" /></a></td><td><a href="media/community/fullsize/trio_paintball.jpg" rel="shadowbox[Gallery]" title="After an intense paintball match"><img src="media/community/thumbnails/trio_paintball.jpg" alt="Troy, Annie and Abed after paintball" /></a></td></tr>
                </table>
            </div>
        </div>
    </body>

</html>


NBC社区图片库
Shadowbox.init（）；
$（'.sb滑块'）.slicebox（）；
《社区》是一部由丹·哈蒙创作的美国电视喜剧，在NBC播出。这部系列片讲述的是一群学生在科罗拉多州格林代尔的一所社区学院的故事。该剧大量使用元幽默和流行文化，经常模仿电影和电视中的陈词滥调和比喻。该剧于2009年9月17日星期四首映，并于东部时间晚上8:00播出。它之前在美国东部时间晚上9:30播出，从首映开始，但后来在第四集重新播出。2011年3月17日，NBC为《社区》续播了第三季，该季于2011年9月22日首播
您试图在DOM未就绪时使用DOM元素。请做以下更改。它应该是这样工作的

首先，删除这两个脚本标记。它们是不必要的，我们只需将它们组合到一个脚本标记中。

<script type="text/javascript"> Shadowbox.init(); </script> <!-- Slicebox Code --> <script type="text/javascript"> $('.sb-slider').slicebox(); </script> Shadowbox.init（）； $（'.sb滑块'）.slicebox（）； 然后写下这几行

<script type="text/javascript"> $(function(){ Shadowbox.init(); <!-- Slicebox Code --> $('.sb-slider').slicebox(); }); </script> $（函数（）{ Shadowbox.init（）； $（'.sb滑块'）.slicebox（）； });
你能编辑你的问题并发布完整的HTML源代码吗？或者更好，上传一个演示并发布一个链接？我刚刚看了imgur.com/FocVx，我想这就是你要做的。我看不到任何关于sb滑球类的东西。我也看不到slicebox脚本。@dnuttle:他只是在这个图像托管服务中显示他的目录结构。@Doug Smith:您在页面的哪里调用
$（'.sb slider'）.slicebox（）很可能您正在尝试访问一个在初始化时甚至还没有加载的DOM元素。
<script type="text/javascript">
$(function(){
    Shadowbox.init();
    <!-- Slicebox Code -->
    $('.sb-slider').slicebox();
});
</script>