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的滑塊與加/減按鈕從滑塊