2
A
回答
0
我强烈推荐SerialScroll插件here是一个演示,文档可以找到here。
我用这个插件和一些简单的html创建了一个非常酷的图像滑块。以下是我使用的代码和HTML。
<div id="featProd_container">
<span id="previous" class="disable"> </span>
<span id="next" class="step"> </span>
<%-- <div id="featProd_maskOver"></div>--%>
<div id="featProd_mask">
<asp:ListView ID="lvFeatured" runat="server" GroupItemCount="2">
<LayoutTemplate>
<div id="featProd_scroll">
<div id="groupPlaceholder" runat="server" />
</div>
</LayoutTemplate>
<GroupTemplate>
<div class="itemSet">
<div id="itemPlaceholder" runat="server" />
</div>
</GroupTemplate>
<GroupSeparatorTemplate></GroupSeparatorTemplate>
<ItemTemplate>
<div class="item">
<a href='<%# ((string)Eval("DetailUrl")).Replace("~", "") %>'><img src='<%# Eval("SliderImageUrl") %>' /></a>
<div class="itemInfo">
<h3><a href='<%# ((string)Eval("DetailUrl")).Replace("~", "") %>' style="color:Black;"><%# Eval("DisplayName") %></a> </h3>
<span><%# Eval("ProductId")%></span>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
<div id="jumpLinkContainer" style="display: table; margin:0 auto;">
<ul id="featProd_control" style="width: 70px;">
<asp:PlaceHolder ID="phJumpLinks" runat="server" />
</ul>
</div>
</div>
只需开启下面的脚本调用,并配置行为和导航元素选择器。
<script type="text/javascript">
$(document).ready(function() { loadFeaturedProducts(); });
function loadFeaturedProducts() {
$('.item > a, .itemInfo > h3 > a').click(function() { var link = $(this).attr('href'); if (link) { document.location.href = link; } });
$('#featProd_container > #featProd_mask').serialScroll({
items: '#featProd_scroll > .itemSet',
prev: '#featProd_container > #previous',
next: '#featProd_container > #next',
//offset: -230, //when scrolling to photo, stop 230 before reaching it (from the left)
start: 0, //as we are centering it, start at the 2nd
duration: 700,
force: true,
stop: true,
lock: false,
cycle: false, //don't pull back once you reach the end
easing: 'easeOutQuart', //use this easing equation for a funny effect
jump: true, //click on the images to scroll to them
navigation: '#featProd_container > #jumpLinkContainer > #featProd_control > li',
onBefore: function(e, elem, $pane, $items, pos) {
var nav = $('#featProd_container > #jumpLinkContainer > #featProd_control > li');
nav.removeClass("active"); nav.eq(pos).toggleClass("active");
if ($items) {
var jq = $('#featProd_container > #next, #featProd_container > #previous').removeClass("disable");
if (pos == 0)
$('#featProd_container > #previous').toggleClass("disable");
else if (pos == ($items.length - 1))
$('#featProd_container > #next').toggleClass("disable");
}
}
});
}
</script>
1
试试这个jQuery强大滑块
0
尝试一个jQuery的工具。易于实施和修改。
0
我发表了一篇博客贴子,建立,做一些非常相似的幻灯片区域。这里是链接:
http://blog.bobcravens.com/2009/12/27/BuildingAWebAppSlideShowArea.aspx
这将需要一点修改。例如,我有几个小号框表示当前的照片。这些需要修改才能在您的示例网站上显示菜单。
希望这会给你足够的信息开始。
下面是此幻灯片演示的一个演示。
http://bobcravens.com/hfs_dev/
请注意,这是我的dev分段区域,但不保证长寿命。它将在那里至少几个星期。随时访问,而它持续。
相关问题
- 1. 创建一个滑块的图像
- 2. 创建一个像这样的滑块?
- 3. jQuery的:创建一个圆形滑块
- 4. jquery图像滑块前一个按钮
- 5. jQuery图像滑块?
- 6. 使用Flash Builder创建像Nivo滑块的图像滑块
- 7. 钛Appcelerator的创建图像滑块
- 8. Android - 创建一个类似Airbnb的水平图像滑块
- 9. 如何创建一个简单的jQuery图像滑块没有绝对位置
- 10. jquery单图像滑块
- 11. jQuery图像(产品)滑块
- 12. 图像与nivo滑块jquery
- 13. jQuery的图像滑块
- 14. jquery简单图像滑块
- 15. JQuery图像滑块与滑下来
- 16. 创建一个自动滑块
- 17. 如何为滑块中的每个图像创建链接
- 18. 改变一个UIImageView图像与滑块
- 19. nivo滑块 - 下一个和prev图像
- 20. Css3滑块多个图像
- 21. 图形切断:jQuery图像滑块
- 22. 试图创建一个简单的图库滑块
- 23. 我想创建一个图像滑块滑动全自动文件夹中的所有相似的图像
- 24. 如何创建一个jQuery价格滑块
- 25. 使用控制器创建一个jQuery全宽滑块
- 26. 如何用next和previous按钮创建一个jQuery滑块
- 27. 图像滑块的下一个按钮不起作用。 [JQUERY]
- 28. 寻找一个jQuery图像滑块与中央视口和
- 29. jquery背景滑块重复第一个图像
- 30. 创建jQuery的滑块与加/减按钮从滑块