Question

我正在为我的组织创建一个网站，需要为图片添加幻灯片。我们通常没有高质量的互联网访问权限，维护网站的人在网页设计方面知识渊博，因此经常更新很困难。因此，我正在尝试生成一个图像幻灯片，它将从服务器上的特定文件夹中提取图像。

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

这似乎就是这样，但我不完全知道我在做什么。该指南说将HTML片段放在头部和身体中，这很容易。

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

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

我理解“相对路径图像”和“路径”需要使用我服务器上文件夹的名称进行更新...但我不知道这个代码片段到底是做什么的。它是否会保存为新的.js文件？我没有在HTML中看到任何引用其他文件的内容。

另外......该指南使用了托管在codeproject.com上的jquery API ...我认为可以安全地将其分发给谷歌托管的同一个？我宁愿不依赖codeproject.com。

Answer 1

要遵循的步骤

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并在名为“elements”的标签下查找您的控件。如果HTMLImage控件包含所有服务器端图像，则上述1-3步骤就足够了。

希望有所帮助！

Answer 2

请尝试下面提到的代码。编辑代码底部的标记，并在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>

`

jQuery：拖放网站的文件夹幻灯片

2 个答案: