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

发布于 2024-11-16 12:10:18 字数 1885 浏览 0 评论 0原文

我想创建一个简单的内容滑块，它可以连续滑动内容，并在幻灯片之间暂停。我想在 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>

有人可以给我任何关于如何使用 jQuery 每 3 秒滑动 slide-container div 内容的帮助吗？

原文

I would like to create a simple content slider that would slide content continuously with a pause between the slides.
I would like to create this content inside a SharePoint Web Part (this is just a detail of course)

I have the following markup:

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

and, on DOM ready, I am executing the following code:

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);
            });
        }
    });
});

Basically I create a series of DIV elements and add them inside the container DIV. After the code the markup will be as follow:

<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>

Can somebody give me any help on how to slide, every 3 seconds, the content of the slide-container div with jQuery?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

撩心不撩汉 2024-11-23 12:10:18

我假设 .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 );

    };

}

这样您只需调用函数 roll() 一次，它就会self 在动画（滚动）结束后调用自身，暂停 3 秒（示例中为 3000 毫秒）。

希望有帮助。

I assume your divs inside .ul-widget-content are positioned horizontally one next to the other and you want them to slide horizontally.

You can do something like this, changing the margin-left property of the .ui-widget-content div so it shows the next item every 3 seconds:

function scroll() {

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

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

    }, 500, function () {

        setTimeout( scroll, 3000 );

    };

}

This way you only have to call the function scroll() one time, and it will self call itself after the animation (scrollin) ended, with a pause of 3 seconds (3000 milliseconds in the example).

Hope it helps.

回复收藏 0 原文

~没有更多了~