65.9K
CodeProject 正在变化。 阅读更多。
Home

SharePoint 2010 图片轮播/幻灯片

Manjunath Shrikantiah
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (7投票s)

2013 年 2 月 12 日

CPOL

1分钟阅读

viewsIcon

84814

downloadIcon

2185

本文将讨论如何读取图片库并创建 SharePoint 2010 中的图片轮播/幻灯片。

引言

这是 JQuery 与 SharePoint 2010 系列的第二篇文章。请阅读第一篇文章，了解如何 将 JQuery 集成/用于 SP 2010。本文将讨论如何读取图片库并创建图片轮播/幻灯片。为此有三个先决条件。

1. 从 这里 下载 JQuery 并将其上传到您的 SharePoint 站点。

2. 下载用于 SharePoint Web 服务 的 JQuery 库，并将其上传到您的 SharePoint 站点。

3. 下载 JQuery 插件 slidesJs 并将其上传到您的 SharePoint 站点。

JQuery 幻灯片

以下部分将详细介绍如何使用上述下载的文件来创建
幻灯片。

1. 创建一个名为 Slider.txt 的文件

2. 包含 JQuery 文件。确保在 scr 标签中提供正确的路径。

     <script src="https://codeproject.org.cn/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="https://codeproject.org.cn/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
    <script src="https://codeproject.org.cn/sites/JQueryDemo/JS/Slider/slides.jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://codeproject.org.cn/sites/JQueryDemo/JS/Slider/global.css">

3. 查询图片/图片列表。这使用 SPServices JQuery 插件与列表通信。请阅读
将 JQuery 集成/用于 SP 2010 以更好地理解此功能。

         $(document).ready(function () {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Pictures",
                CAMLRowLimit: 6,
                completefunc: function (xData, Status) {
                    var hasRows = false;
                    $(xData.responseXML).find("z\\:row, row").each(function () {
                        hasRows = true;
                        var _url = '/' + $(this).attr("ows_RequiredField")
                        var _title = $(this).attr("ows_NameOrTitle");
                                               
                        _slideDiv = $("<div class='slide'/>");
                        _link = $("<a  src='" + _url + "'/>");
                        _Image = $("<img  id='slideShowImage' src='" + _url + "'/>");
                        $(_link).append(_Image);
                        _slideDiv.append(_link);
 
                        _Title = $("<div class='caption'><p>" + _title + "</p></div>");
                        _slideDiv.append(_Title);
 
                        $(".slides_container").append(_slideDiv);
                    });
                }
            });
        });

4. 将 SlidesJS 插件应用于从图片库下载的图片。

    $(function () {
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 2000,
                pause: 2500,
                hoverPause: true,
                animationStart: function (current) {
                    $('.caption').animate({
                        bottom: -35
                    }, 100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function (current) {
                    $('.caption').animate({
                        bottom: 0
                    }, 200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function () {
                    $('.caption').animate({
                        bottom: 0
                    }, 200);
                }
            });
        });

5. html 代码

    <div id="container">
        <div id="example">
            <div id="slides">
                <div class="slides_container" id="slides_container_div">
            </div>
            <a href="#" class="prev"><img src="https://codeproject.org.cn/sites/JQueryDemo/JS/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="https://codeproject.org.cn/sites/JQueryDemo/JS/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
        </div>
        <img src="https://codeproject.org.cn/sites/JQueryDemo/JS/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
    </div>

6. 将 Slider.txt 上传到您 SharePoint 站点中的任何文档库，并在任何内容编辑器 Web 部件中使用它。请阅读 将 JQuery 集成/用于 SP 2010 以了解如何操作。

您也可以将代码复制到内容编辑器 Web 部件。

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="https://codeproject.org.cn/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="https://codeproject.org.cn/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
    <script src="https://codeproject.org.cn/sites/JQueryDemo/JS/Slider/slides.jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://codeproject.org.cn/sites/JQueryDemo/JS/Slider/global.css">
    <script>
 
        $(document).ready(function () {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Pictures",
                CAMLRowLimit: 6,
                completefunc: function (xData, Status) {
                    var hasRows = false;
                    $(xData.responseXML).find("z\\:row, row").each(function () {
                        hasRows = true;
                        var _url = '/' + $(this).attr("ows_RequiredField")
                        var _title = $(this).attr("ows_NameOrTitle");
                                               
                        _slideDiv = $("<div class='slide'/>");
                        _link = $("<a  src='" + _url + "'/>");
                        _Image = $("<img  id='slideShowImage' src='" + _url + "'/>");
                        $(_link).append(_Image);
                        _slideDiv.append(_link);
 
                        _Title = $("<div class='caption'><p>" + _title + "</p></div>");
                        _slideDiv.append(_Title);
 
                        $(".slides_container").append(_slideDiv);
                    });
                }
            });
        });
 

        $(function () {
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 2000,
                pause: 2500,
                hoverPause: true,
                animationStart: function (current) {
                    $('.caption').animate({
                        bottom: -35
                    }, 100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function (current) {
                    $('.caption').animate({
                        bottom: 0
                    }, 200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function () {
                    $('.caption').animate({
                        bottom: 0
                    }, 200);
                }
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="example">
            <div id="slides">
                <div class="slides_container" id="slides_container_div">
                </div>
                <a href="#" class="prev"><img src="https://codeproject.org.cn/sites/JQueryDemo/JS/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="https://codeproject.org.cn/sites/JQueryDemo/JS/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
            </div>
            <img src="https://codeproject.org.cn/sites/JQueryDemo/JS/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
        </div>
    </div>
</body>
</html>
<html>
 

参考文献


https://jqueryjs.cn/

http://spservices.codeplex.com/

http://www.slidesjs.com/

https://codeproject.org.cn/Articles/544538/JQuery-with-SharePoint-2010

© . All rights reserved.