使用内容查询WebPart共享点进行图像旋转 [英] Image rotation using content query webpart sharepoint

问题描述

我将上传列表中的图像，并且需要在webpart中动态显示事物.请帮助

---

闪电战

i will upload the images in the list and things needs to display dynamically in the webpart.please help

---

Blitz

推荐答案

嗨 我已经实现了一个滑块-旋转演示之前，我使用

i've implemented a slider - rotation  demo before , i uses the slider sample  from w3school ( css,hs,html), below the main csom script for retrieving the page title and rollupimage. 

复制html&上面的CSS链接和下面的脚本，并将它们添加到内容查询Webpart中.

Copy the html & CSS from above link  and the below script and add them to content query webpart.

如果您不同，请更改网址和字段标题

change the urls and fields title if you have different

脚本

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext',  CallPagesItems);

function getListItems(listTitle,success,error)
{
    var ctx = SP.ClientContext.get_current();
    var list = ctx.get_web().get_lists().getByTitle(listTitle);
    var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
    ctx.load(items);
    ctx.executeQueryAsync(function() {
        success(items);
    },error);
}

function CallPagesItems()
{
getListItems('pages',printPageItemsDetails,logError);
}

function printPageItemsDetails(pageItems)
{
    for(var i = 0; i < pageItems.get_count();i++) {
        var pageItem = pageItems.getItemAtIndex(i);
		var PageTitle=pageItem.get_fieldValues()['Title'];
		var RollUpImageURL=pageItem.get_fieldValues()['PublishingRollupImage'];
		var slide ="<div class='mySlides fade' style='display: none;'><div class='numbertext'>1 / 3</div>"+RollUpImageURL+"<div class='text'>"+PageTitle+"</div></div>";

(".slideshow-container). (滑动); } } 函数logError(error){ console.log(JSON.stringify(error)); } </script>

(".slideshow-container").append(slide); } } function logError(error){ console.log(JSON.stringify(error)); } </script>

The Result

我之前已经回答过类似的话题，请看看

i've answered similar thread before, please have a look 

https://social.technet.microsoft.com/Forums/office/zh-CN/a55e759a-a4c5-4691-9601-b3bd41c7cb85/how-announcements-slider-in-sharepoint-homepage-retreive-title-and-image- from-events-pages?forum = sharepointgeneral

https://social.technet.microsoft.com/Forums/office/en-US/a55e759a-a4c5-4691-9601-b3bd41c7cb85/how-announcements-slider-in-sharepoint-homepage-retreive-title-and-image-from-events-pages?forum=sharepointgeneral

希望对您有帮助

这篇关于使用内容查询WebPart共享点进行图像旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！