其实这个需求并不难 就是找问题特别难 如标题所示，因为要在sharepoint上做一种样式能让内容查询部件能有此样式，具体内容查询部件样式暂时没研究，大概知道是通过StyleLibrary(样式库)里的ItemStyle.xsl来控制输出的每个项，用ContentQueryMan.xsl文件来做样式的转换，通过js把每项的数据值取到然后放到预先定义好的样式中，加上js与css就出来了想要的效果，简单定义就是sharepoint中的列表或文档库的数据我们可以自定义其显示样式并给其加上js效果，这只是客户对sharepoint展示的一个需求，大家可能很少会用到，所以我在这只是简单记录一下自己的实现方式，已便备忘。下面是代码部分：

ItemStyle.xsl文件：

<!--自定义模板：图片滚动效果纵向(Start)-->    
     <xsl:template name="图片滚动效果纵向" match="Row[@Style='图片滚动效果纵向']" mode="itemstyle">
        <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
        </xsl:variable>
        <xsl:if test="$SafeImageUrl!=''">
            <div class="imageDiv_zx" style="display:none" Image="{$SafeImageUrl}"  alt="{$DisplayTitle}" href="{$SafeLinkUrl}">
           <xsl:value-of  select="@ImageUrlAltText"></xsl:value-of>
        </div></xsl:if>
    </xsl:template>
<!--自定义模板：图片滚动效果(End) -->

ContentQueryMain.xsl 文件

<xsl:if test="//Row[@Style='图片滚动效果纵向']">
            <style type="text/css">
                #demo_zx {
                background: #FFF;
                overflow:hidden;
                border: 1px dashed #CCC;
                height: 252px;
                text-align: center;
                float: right;
                width:100%;
                }
                #demo_zx img {
                border: 3px solid #F2F2F2;
                display: block;
                width:140;
                height:100;
                }
            </style>
            <div id="demo_zx">
                <div id="demo1_zx"></div>
                <div id="demo2_zx"></div>
                </div> 
            <script src="/_layouts/2052/mcs/FlashNews/ImageMove_zx.js"/>
             <script>
             starMove_zx("imageDiv_zx");
             setFiexdTime_zx();
            </script>            

          </xsl:if>

ImageMove_zx.js

var speed_zx = 30;
var tab_zx = document.getElementById("demo_zx");
var tab1_zx = document.getElementById("demo1_zx");
var tab2_zx = document.getElementById("demo2_zx");
var MyMar_zx;


function starMove_zx(className) {
    var imageDiv_zx = getElementsByClassName(className);
    var demo1_zx = document.getElementById("demo1_zx");
    if (typeof (imageDiv_zx) != "undefined") 
    {
        var divlength = imageDiv_zx.length;
        if (typeof (divlength) != "undefined") 
        {
            for (i = 0; i < divlength; i++) 
            {
                var aNode = document.createElement('a');
                aNode.setAttribute('href', imageDiv_zx[i].getAttribute('href'));
                var imgNode = document.createElement('img');
                imgNode.setAttribute('src', imageDiv_zx[i].getAttribute('Image'));
                aNode.appendChild(imgNode);
                if (typeof (demo1_zx) != "undefined")
                    demo1_zx.appendChild(aNode);
            }
        }
    }
}

function Marquee_zx() {
    if (tab2_zx.offsetTop - tab_zx.scrollTop <= 0) {
        tab_zx.scrollTop -= tab1_zx.offsetHeight
    }
    else {
        tab_zx.scrollTop++
    }
}

function setFiexdTime_zx()
{
    tab2_zx.innerHTML = tab1_zx.innerHTML;
    MyMar_zx = setInterval(Marquee_zx, speed_zx);
    tab_zx.onmouseover = function () { clearInterval(MyMar_zx) };
    tab_zx.onmouseout = function () { MyMar_zx = setInterval(Marquee_zx, speed_zx) };

}
<!--js的一个小技巧，此方法取class相同的div元素-->

function getElementsByClassName(className) {
    var el = [],
        _el = document.getElementsByTagName('div');
    for (var i = 0; i < _el.length; i++) {
        if (_el[i].className == className) {
            el[el.length] = _el[i];
        }
    }
    return el;
}

大致就这么多，现在就可以直接在sharepoint上添加查询部件了  用名称为'图片滚动效果纵向'的样式类型就可以了