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

我想创建一个简单的内容滑块，通过幻灯片之间的暂停连续滑动内容。我想里面创建一个SharePoint Web部件此内容（这当然只是一个细节）jQuery内容滑块（无图像内容）

我有以下标记：

<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秒，slide-container div使用jQuery的内容？

来源

2011-06-22 Lorenzo

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

你可以做这样的事情，改变的.ui小部件内容div的利润率左属性，因此它显示的下一个项目每3秒：

function scroll() { 

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

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

    }, 500, function() { 

     setTimeout(scroll, 3000); 

    }; 

}

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

希望它有帮助。

来源

2011-06-22 09:13:15

感谢您的回答。我不确定要理解你的假设。你能不能更详细些？我已经编辑了我的问题在最后的详细信息... – Lorenzo

我的假设是，你正在寻找一个旋转木马，所以基本上你需要有一个父div只充当一个固定宽度和高度的容器（#slide在你的情况下），溢出设置为隐藏。这个div将包含一个巨大的div，其中包含你想要显示的所有元素，并且是通过改变其位置来“滚动”的。我建议你去寻找jQuery传送带，真的有很多。 –

回答

相关问题