创建一个 jQuery 图像滑块答案

【问题标题】：Creating a jQuery Image Slider创建一个 jQuery 图像滑块
【发布时间】：2010-01-06 23:48:00
【问题描述】：

我正在尝试创建一个像 this 这样的 jQuery 滑块。

我在任何地方都找不到任何使它们像这样的教程或插件。

【问题讨论】：

标签： jquery html css slider

【解决方案1】：

试试这个强大的 jquery 滑块

Scrollable

【讨论】：

【解决方案2】：

我强烈推荐SerialScroll插件here是一个demo，文档可以在here找到。

我用这个插件和一些简单的 html 创建了一个非常酷的图像滑块。下面是我使用的代码和 HTML。

<div id="featProd_container">
    <span id="previous" class="disable">&nbsp;</span>
    <span id="next" class="step">&nbsp;</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>

【讨论】：

【解决方案3】：

试试 jQuery 工具中的那个。易于实施和修改。

http://flowplayer.org/tools/demos/scrollable/index.html

【讨论】：

【解决方案4】：

我发布了一篇博客文章，该文章构建了一个幻灯片放映区域，该区域的功能非常相似。这是链接：

http://blog.bobcravens.com/2009/12/27/BuildingAWebAppSlideShowArea.aspx

这需要一些修改。例如，我有几个小框表示当前照片。这些需要修改以在您的示例网站上显示菜单。

希望这将为您提供足够的信息以开始使用。

这里是这个幻灯片的演示。

http://bobcravens.com/hfs_dev/

请注意，这是我的开发暂存区，不能保证长期存在。不过，它至少会在那里存在几个星期。在此期间随时访问。

【讨论】：