Question

我想创建一个简单的内容滑块，可以在幻灯片之间暂停时连续滑动内容。我想在SharePoint Web部件中创建此内容（当然这只是一个细节）

我有以下标记：

<div id="slide-container"></div>

并且，在DOM就绪时，我正在执行以下代码：

var slider = $('#slide-container');
var wsUrl = '<%= SPContext.Current.Site.Url %>' + wsBaseUrl + 'MyWS.asmx/Monitor';
$.get('<%= SPContext.Current.Site.Url %>' + templateBaseUrl + 'tmpl_Monitorable.html', function (template) {
    $.ajax({
        type: "post", url: wsUrl, data: JSON.stringify({}), contentType: "application/json; charset=utf-8",
        dataType: "json", async: false,
        success: function (data) {
            var all = data.d;
            $.each(all, function (key, value) {
                var slide = $.tmpl(template, value);
                var div = $("<div></div>").append(slide);
                slider.append(div);
            });
        }
    });
});

基本上我创建了一系列DIV元素并将它们添加到容器DIV中。在代码之后，标记将如下：

<div id="slide-container">
    ...
    <div class="ui-widget">
        <div class="ui-widget-header">${Title}</div>
        <div class="ui-widget-content">
            <div style="padding-left: 14px;height:18px;">New records<div style="float: right; width: 40px; text-align:right;padding-right: 3px;">${NewRecords}</div></div>
            <div style="padding-left: 14px;height:18px;">Modified records<div style="float: right; width: 40px; text-align:right;padding-right: 3px;">${ModifiedRecords}</div></div>
            <div style="margin: 10px 2px 6px 2px; text-align:right;">Last updated at ${LastUpdated}</div>
        </div>
    </div>
    ...
</div>

有人可以帮我解决如何每隔3秒使用jQuery滑动slide-container div的内容吗？

Answer 1

我假设你的.ul-widget-content里面的div是水平放置的，你希望它们水平滑动。

您可以执行以下操作，更改.ui-widget-content div的margin-left属性，使其每3秒显示一个下一个项目：

function scroll() {

    $( '.ui-widget-content' ).animate({

        'margin-left': '-=' + $( '#slide-container' ).width()

    }, 500, function () {

        setTimeout( scroll, 3000 );

    };

}

这样你只需要调用函数scroll（）一次，它就会在动画（scrollin）结束后自行调用，暂停3秒（示例中为3000毫秒）。

希望它有所帮助。

jQuery内容滑块（无图像内容）

1 个答案: