jQuery：为网站拖放文件夹幻灯片答案

【问题标题】：jQuery: drag and drop folder slideshow for websitejQuery：为网站拖放文件夹幻灯片
【发布时间】：2014-02-04 11:16:48
【问题描述】：

我正在为我的组织创建一个需要幻灯片放映的网站。我们通常无法高质量地访问互联网，并且维护网站的人员在网页设计方面的知识也不高，因此经常更新是很困难的。因此，我正在尝试生成一个图像幻灯片，它将从服务器上的特定文件夹中提取图像。

http://www.codeproject.com/Tips/581747/jQuery-Slideshow-for-a-selected-folder?fid=1831110&select=4601478&fr=1

这似乎就是这样做的，但是我不完全知道我在做什么。指南说将 HTML sn-ps 放在头部和正文中，这很容易。

接下来它声明要创建一个“简单子”，并给出以下代码......

Dim oDir As New DirectoryInfo(Server.MapPath("<relative path the images>"))
Dim fileList() As FileInfo = oDir.GetFiles("*.jpg")
Dim iFileCount As Integer = fileList.Count
iFileCount -= 1
Dim oImage As HtmlImage
For i As Integer = 0 To iFileCount
    oImage = New HtmlImage
    With oImage
        .Src = String.Format("path\{0}", fileList(i))
        If i = 0 Then .Attributes.Add("class", "active")
    End With
    slideshow.Controls.Add(oImage)
Next

我知道“图像的相对路径”和“路径”需要用我服务器上文件夹的名称进行更新......但我不知道如何处理这段代码 sn-p。它会保存为新的 .js 文件吗？我在 HTML 中没有看到任何引用另一个文件的内容。

另外...该指南使用托管在 codeproject.com 上的 jquery API...我假设将其替换为与 Google 托管的同一个 API 是安全的？我不想依赖 codeproject.com。

【问题讨论】：

该代码是VB.net（服务器端）代码。你有什么样的服务器？
我不太清楚你的意思。据我所知，它是一个 FTP 网络服务器。对不起，如果那不是你所追求的。我现在正在边做边学，所以我的知识有差距。
当您购买主机帐户时，您可能最终选择了 Windows 服务器或 Linux 服务器。通常，共享主机帐户往往是 Linux，并且开箱即用地支持 PHP。您找到的代码 sn-p 是特定于 Windows (.net) 的。 PHP 和 .NET 是（用外行的话）两种不同的语言，您可以使用它们来编写“服务器端”代码。

标签： javascript jquery html image slideshow

【解决方案1】：

请尝试下面提到的代码。编辑代码底部的标签，并在 src="" 中添加您的图像文件的链接。由于可访问性原因，此幻灯片每 7 次旋转一次。如果您愿意，可以将其更改为不同的值。如果您仍然无法解决此问题，请告诉我！

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"
    type="text/javascript"></script>
    <script type="text/javascript">
        /***
         Simple jQuery Slideshow Script
         Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify,
         not responsible for anything, etc.  Please link out to me if you like it :)
         ***/

        function slideSwitch() {
            var $active = $('#slideshow IMG.active');

            if ($active.length == 0)
                $active = $('#slideshow IMG:last');

            // use this to pull the images in the order they appear in the markup
            var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');

            // uncomment the 3 lines below to pull the images in random order

            // var $sibs  = $active.siblings();
            // var rndNum = Math.floor(Math.random() * $sibs.length );
            // var $next  = $( $sibs[ rndNum ] );

            $active.addClass('last-active');

            $next.css({
                opacity : 0.0
            }).addClass('active').animate({
                opacity : 1.0
            }, 1000, function() {
                $active.removeClass('active last-active');
            });
        }

        $(function() {
            setInterval(function() {
                console.log("fsdfsdf");
                slideSwitch();
            }, 7000);
        });

    </script>
    <style type="text/css">
        /*** set the width and height to match your images **/

        #slideshow {
            position: relative;
            height: 350px;
            width: 350px;
        }

        #slideshow IMG {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 8;
            opacity: 0.0;
            height: 350px;
            width: 350px;
        }

        #slideshow IMG.active {
            z-index: 10;
            opacity: 1.0;
        }

        #slideshow IMG.last-active {
            z-index: 9;
        }

    </style>
</head>
<body>
    <div id="slideshow">
        <img src="http://www.tate.org.uk/art/images/work/D/D29/D29293_10.jpg" alt="Picture 1" class="active">
        <img src="http://3.bp.blogspot.com/_ShpNcCZ0lVE/S_n3Xkv126I/AAAAAAAABbs/T0B8xwIg7Ko/s1600/IMG_7163.JPG" alt="Picture 2">
        <img src="http://www.automotofoto.net/wp-content/uploads/2012/04/Honda-World-Superbike-Team-Heads-Home-for-Round-Three-THUMBNAIL-2.jpg" alt="Picture 3">
    </div>
</body>

【讨论】：

【解决方案2】：

要遵循的步骤

1. Open your aspx/HTML page (your code sounds as if it's an aspx page)
2. With in the head/body paste the two javascript <script>...</script> tags codeproject has mentioned.
3. Do the same for the CSS which is within <style>...</style> tag
4. Drag and Drop an HTMLImage control to your webpage and name it slideshow
5. Your Sub needs to live on the page to populate the HTMLImage control with the images.

检查您的 HTMLImage 控件是否加载了所有图像很重要。如果您使用 Chrome 来测试网站，请按 F12 并在名为“元素”的选项卡下查找您的控件。如果 HTMLImage 控件包含所有服务器端图像，那么上面提到的 1-3 步就足够了。

希望有帮助！

【讨论】：

我仍然不确定我在用该代码 sn-p 做什么。我假设这是您正在谈论的 HTMLImage 控件。我应该将其粘贴到文本编辑器中并将其命名为幻灯片吗？什么扩展？
好的，尝试使用该代码创建一个文件，将其命名为 slideshow.aspx，这是不对的。我觉得这很容易，我只是不明白。背景...我是一名摄影师和布局设计师（有很多 Adobe Suite 经验）。
代码 sn-p 仅用于创建可以在幻灯片中保存图片的 HTML 元素。你用什么语言来写你的代码？您是否尝试仅使用 HTML、CSS 和 jQuery 或 vb.net（在 aspx 中）来实现这一目标？
任何有效的就是我想要使用的。我正在用 HTML 和 CSS 像任何其他网站一样创建这个网站...使用 Muse 来创建设计，并且我正在修补我需要的东西，我可以尽我所能。我选择了该指南，因为它似乎可以满足我的需要。我可能需要再搜索一些才能弄清楚这一点。如果有人以前见过这样的事情，那么朝着正确的方向前进会很棒。
您有机会尝试我上面粘贴的代码吗？将其另存为 HTML 文件并按上述更改 img 标记中的 src。