Создание jQuery Image Slider

Question

Я пытаюсь создать jQuery Slider, например this .

Я нигде не могу найти учебники или плагины, которые бы делали их такими.

Answer 1

Попробуйте этот мощный слайдер jquery

прокрутка

Answer 2

Я опубликовал пост в блоге, который создает область слайд-шоу, которая делает что-то очень похожее. Вот ссылка:

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

Это займет немного изменений. Например, у меня есть несколько маленьких пронумерованных коробок, которые указывают текущую фотографию. Их необходимо изменить, чтобы отобразить меню на вашем примере сайта.

Надеюсь, это даст вам достаточно информации, чтобы начать.

Вот демонстрация этого слайд-шоу в действии.

http://bobcravens.com/hfs_dev/

Пожалуйста, обратите внимание, что это моя область разработки, и она не гарантированно будет долгой. Это будет там, по крайней мере, пару недель. Не стесняйтесь посетить, пока он длится.

Answer 3

Попробуйте в инструментах jQuery. Легко реализовать и модифицировать.

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

Answer 4

Я очень рекомендую подключаемый модуль SerialScroll здесь - это демо, а документацию можно найти здесь .

Я создал действительно крутой слайдер изображений с этим плагином и простым 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>