Постоянно анимируйте слайды влево с помощью jQuery - PullRequest
Новая
       3

Постоянно анимируйте слайды влево с помощью jQuery

2 голосов
/ 08 ноября 2011

Добрый день,

Я пробовал различные методы, найденные здесь и в различных поисках Google (безуспешно). Я пытаюсь воссоздать функциональность «Top Products Viewer», найденную на этой странице Microsoft (посмотрите чуть ниже ротатора, который лежит на странице). Я очень хорошо справился с CSS и версткой. Однако у меня СЕРЬЕЗНЫЕ проблемы с запуском анимации.

Я бы хотел, чтобы слайды оживили ВСЕГДА ВЛЕВО.

Любая помощь приветствуется. Я выдолбил функцию animateLeftOnly, потому что я ищу новую опцию.

UPDATE:
Помощь ниже была очень полезной. Но изменение сферы действия заставило меня пойти другим путем. Ниже представлена ​​ЗАКЛЮЧИТЕЛЬНАЯ РАБОЧАЯ ВЕРСИЯ в «ОКРУЖАЮЩЕЙ СРЕДЕ»: 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>

    <style type="text/css">

        /* This styling is assumed to come-in from a master set of CSS files */
        body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
        h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;}
        h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;}
    </style>

    <style type="text/css">

        /* This is the styling for the control (itself) */
        .metroPivot { border: 1px solid #D3D3D3; height: 250px; width: 930px; overflow: hidden; }
        .metroPivot .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; }
        .metroPivot .header h3 { font-size: 162.5%; margin-bottom: 10px; }

        .metroPivot .content-categories { width: auto; }
        .metroPivot .content-categories div { float: left; }
        .metroPivot .content-categories div.current  
        {
            background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png);
            background-position: -55px -61px;
            overflow: hidden;
            background-repeat: no-repeat;
        }

        .metroPivot .content-categories div h4 { width: 115px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; }
        .metroPivot .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; }
        .metroPivot .content-categories div.last h4 { border-right: 0px; }
        .metroPivot .content-categories div.current h4 a { color: #4F4F4F; cursor: default; }

        .metroPivot .content-viewer { width: 20000px; clear: both; }
        .metroPivot .content-viewer .master-slide { float: left; height: 123px; width: 928px; line-height: 123px; }

        .metroPivot .content-viewer .master-slide .html-template { border-right: 1px solid #D3D3D3; float: left; height: 110px; width: 288px; padding: 0 10px; }
        .metroPivot .content-viewer .master-slide .last { border-right: 0px; }

        .metroPivot .content-listing { display: none; }

        /* DELETE LATER - maybe 
        .metroPivot .content-listing .html-template .wrapper { width: 100%; }
        .metroPivot .content-listing .html-template .wrapper a.image { float: left; text-decoration: none; padding-right: 10px; }
        .metroPivot .content-listing .html-template .wrapper .content { float: left; width: 215px; }
        .metroPivot .content-listing .html-template .wrapper .content a.title { display: block; text-decoration: none; }

        .metroPivot .content-listing .image-template .wrapper { width: 100%; }
        .metroPivot .content-listing .image-template .wrapper a { float:left; text-decoration: none; }
        */
    </style>

    <script type="text/javascript">

        var metroPivot = (function ($) {
            var publicInstances = {};

            publicInstances.controller = controller;
            function controller(clientId, options) {

                var defaults = 
                {
                    templateType: 'html-template',
                    behavior: 'continuous-left'
                };

                this.CSSCLASS_CURRENT = 'current';
                this.CSSCLASS_LAST = 'last';

                var self = this;

                this.clientId = clientId;
                this.context = $('#' + self.clientId);

                this.header = $('.header', self.context);
                this.category = $('.content-categories', self.context);
                this.categories = self.category.children();
                this.viewer = $('.content-viewer', self.context);
                this.viewerItems = self.viewer.children();
                this.list = $('.content-listing', self.context);
                this.listItems = self.list.children();

                this.current = undefined;
                this.previous = undefined;

                this.isAnimating = false;

                this.initialize = function () {

                    if (self.categories.length >= 1)
                        self.current = $('.' + self.CSSCLASS_CURRENT, self.category);

                    if (self.categories.length <= 1)
                        return;

                    if (options != undefined)
                        if (options.length > 0)
                            defaults = $.extend(defaults, options);

                    self.populateMaster(0, 0);

                    self.categories.each(function () {
                        $(this).click(self.categoryClicked);
                    });

                    self.listItems.each(function () {
                        $(this).data('index', $(this).index());
                    });
                };
                this.categoryClicked = function () {

                    var next = $(this);
                    if (next.hasClass(self.CSSCLASS_CURRENT))
                        return;

                    if (self.isAnimating)
                        return;

                    self.isAnimating = true;

                    var previous = self.current;
                    next.toggleClass(self.CSSCLASS_CURRENT);
                    previous.toggleClass(self.CSSCLASS_CURRENT);

                    self.current = next;
                    self.previous = previous;

                    self.move();
                };
                this.populateMaster = function (masterIndex, categoryIndex) {

                    // TODO: the selectors need to work directly off of this objects properties.
                    masterIndex += 1;
                    var master = $(".master-slide:nth-child(" + masterIndex + ")", self.viewer);
                    var clones = $("[data-index=" + categoryIndex + "]", self.list).clone();

                    master.empty();
                    clones.css('display', 'block').appendTo(master);
                };
                this.move = function () {

                    var categoryIndex = self.current.index();
                    self.populateMaster(1, categoryIndex);

                    if(defaults.behavior == 'continuous-left')
                        self.animateContinuousLeft();
                };
                this.animateContinuousLeft = function () {

                    // TODO: the selectors need to work directly off of this objects properties.
                    var currentSlide = $('div.content-viewer div:first');
                    if (currentSlide.length > 0) {

                        currentSlide.clone().appendTo('div.content-viewer');
                        currentSlide.animate({ width: 'hide' }, function () {
                            $(this).remove();

                            self.isAnimating = false;
                        });
                    }
                };

                self.initialize();
            };

            return publicInstances;
        })(jQuery);

        var instance = undefined;

        $(document).ready(function () {

            instance = new metroPivot.controller('myControl');
        });
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div id="myControl" class="metroPivot">
        <div class="header">
            <h3>
                Top Products
            </h3>
        </div>
        <div class="content-categories">
            <div class="current">
                <h4>
                    <a>Most Popular</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Windows</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Office</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Xbox</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Windows Phone</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Windows Live</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Bing</a>
                </h4>
            </div>
            <div class="last">
                <h4>
                    <a>Bada-Bing!</a>
                </h4>
            </div>
        </div>
        <div class="content-viewer">
            <div class="master-slide">
            </div>
            <div class="master-slide">
            </div>
        </div>
        <div class="content-listing">
            <div data-index="0" class="html-template">
                Most Popular
            </div>
            <div data-index="0" class="html-template">
                Most Popular
            </div>
            <div data-index="0" class="html-template last">
                Most Popular
            </div>
            <div data-index="1" class="html-template">
                Windows
            </div>
            <div data-index="1" class="html-template">
                Windows
            </div>
            <div data-index="1" class="html-template last">
                Windows
            </div>
            <div data-index="2" class="html-template">
                Office
            </div>
            <div data-index="2" class="html-template">
                Office
            </div>
            <div data-index="2" class="html-template last">
                Office
            </div>
            <div data-index="3" class="html-template">
                Xbox
            </div>
            <div data-index="3" class="html-template">
                Xbox
            </div>
            <div data-index="3" class="html-template last">
                Xbox
            </div>
            <div data-index="4" class="html-template">
                Windows Phone
            </div>
            <div data-index="4" class="html-template">
                Windows Phone
            </div>
            <div data-index="4" class="html-template last">
                Windows Phone
            </div>
            <div data-index="5" class="html-template">
                Windows Live
            </div>
            <div data-index="5" class="html-template">
                Windows Live
            </div>
            <div data-index="5" class="html-template last">
                Windows Live
            </div>
            <div data-index="6" class="html-template">
                Bing
            </div>
            <div data-index="6" class="html-template">
                Bing
            </div>
            <div data-index="6" class="html-template last">
                Bing
            </div>
            <div data-index="7" class="html-template">
                Bada-Bing!
            </div>
            <div data-index="7" class="html-template">
                Bada-Bing!
            </div>
            <div data-index="7" class="html-template last">
                Bada-Bing!
            </div>
        </div>
    </div>

</asp:Content>

UPDATE:
Все ниже здесь было частью первоначального вопроса. Используйте код ВЫШЕ в качестве окончательного решения.

Вот JS-FIDDLE кода ниже.

Вот код: 

<script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script>

<style type="text/css">

    /* This styling is assumed to come-in from a master set of CSS files */
    body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
    h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;}
    h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;}
</style> 

<style type="text/css">

    /* This is the styling for the control (itself) */
    .slideScroll-horizontal { border: 1px solid #D3D3D3; height: 270px; width: 960px; overflow: hidden; }
    .slideScroll-horizontal .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; }
    .slideScroll-horizontal .header h3 { font-size: 162.5%; margin-bottom: 10px; }

    .slideScroll-horizontal .content-categories { width: auto; }
    .slideScroll-horizontal .content-categories div { float: left; }
    .slideScroll-horizontal .content-categories div.current  
    {
        background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png);
        background-position: -55px -61px;
        overflow: hidden;
        background-repeat: no-repeat;
    }

    .slideScroll-horizontal .content-categories div h4 { width: 118px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; }
    .slideScroll-horizontal .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; }
    .slideScroll-horizontal .content-categories div.last h4 { border-right: 0px; }
    .slideScroll-horizontal .content-categories div.current h4 a { color: #4F4F4F; cursor: default; }

    .slideScroll-horizontal .content-listing { width: 20000px; clear: both; padding: 0 10px; }
    .slideScroll-horizontal .content-listing .html-template { border-right: 1px solid #D3D3D3; float: left; height: 145px; width: 300px; padding: 0 10px; }

    /* DELETE LATER - maybe */
    .slideScroll-horizontal .content-listing .html-template { text-align: center; line-height: 145px; }
</style>

<script type="text/javascript">

    var slideScroll = (function ($) {
        var publicInstances = {};

        publicInstances.controller = controller;
        function controller(clientId, options) {

            var defaults = {};

            this.CSSCLASS_CURRENT = 'current';
            this.CSSCLASS_LAST = 'last';

            var self = this;

            this.clientId = clientId;
            this.context = $('#' + self.clientId);

            this.header = $('.header', self.context);
            this.category = $('.content-categories', self.context);
            this.categories = self.category.children();
            this.list = $('.content-listing:first', self.context);
            this.listItems = self.list.children();

            this.current = undefined;
            this.previous = undefined;

            this.initialize = function () {

                if (self.categories.length >= 1)
                    self.current = $('.' + self.CSSCLASS_CURRENT, self.category);

                if (self.categories.length <= 1)
                    return;

                if (options != undefined)
                    defaults = $.extend(defaults, options);

                self.categories.each(function () {
                    $(this).click(self.categoryClicked);
                });

                self.listItems.each(function () {
                    $(this).data('index', $(this).index());
                });
            };
            this.categoryClicked = function () {

                var next = $(this);
                if (next.hasClass(self.CSSCLASS_CURRENT))
                    return;

                var previous = self.current;

                next.toggleClass(self.CSSCLASS_CURRENT);
                previous.toggleClass(self.CSSCLASS_CURRENT);

                self.current = next;
                self.previous = previous;

                if (self.categories.length <= 3)
                    return;

                // TODO: check if animation even needs to happen

                self.move();
            };
            this.move = function () {
                self.animateLeftOnly();
            };

            this.animateLeftOnly = function () {
               // Any help here is appreciated.
            };

            self.initialize();
        };

        return publicInstances;
    })(jQuery);

    var instance = undefined;

    $(document).ready(function () {

        instance = new slideScroll.controller('myControl');
    });
</script>

HTML выглядит так: 

   <div id="myControl" class="slideScroll-horizontal">
        <div class="header">
            <h3>
                Top Products
            </h3>
        </div>
        <div class="content-categories">
            <div class="current">
                <h4>
                    <a>Most Popular</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Windows</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Office</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Xbox</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Windows Phone</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Windows Live</a>
                </h4>
            </div>
            <div>
                <h4>
                    <a>Bing</a>
                </h4>
            </div>
            <div class="last">
                <h4>
                    <a>Bada-Bing!</a>
                </h4>
            </div>
        </div>
        <div class="content-listing">
            <div data-index="0" class="html-template">
                one
            </div>
            <div data-index="1" class="html-template">
                two
            </div>
            <div data-index="2" class="html-template">
                three
            </div>
            <div data-index="3" class="html-template">
                four
            </div>
            <div data-index="4" class="html-template">
                five
            </div>
            <div data-index="5" class="html-template">
                six
            </div>
            <div data-index="6" class="html-template">
                seven
            </div>
            <div data-index="7" class="html-template">
                eight
            </div>
        </div>
    </div>

Предыдущие (жалкие) попытки выглядели так: 

this.animateLeftOnly = function () {

                var categoryIndex = self.current.index();
                var targetSlide = $("[data-index=" + categoryIndex + "]", self.list);
                var targetSlideIndex = targetSlide.index();

                var currentSlide = undefined;
                for (var i = 0; i < targetSlideIndex; i++) {

                    currentSlide = $('div.content-listing div:first');
                    currentSlide.animate({ width: 'hide' }, function () {

                        $(this).insertAfter('div.content-listing div:last', self.listItems);
                        $(this).removeAttr('style');
                    });
                }
                };

1 Ответ

2 голосов
/ 09 ноября 2011

Меня зовут на собрание, поэтому я не могу ответить полностью, но то, что вы хотите сделать, довольно просто. Вы хотите клонировать первого потомка, добавить в конец, сдвинуть влево, удалить первого потомка. Это делает бесконечный цикл. Я делал это много раз.

Вот кое-что, с чего можно начать ... 

<div class="content-categories">
    <div id="slider">
        <div class="current">
            <h4>
                <a>Most Popular</a>
            </h4>
        </div>
        <div>
            <h4>
                <a>Another</a>
            </h4>
        </div>
        <div>
            <h4>
                <a>last one</a>
            </h4>
        </div>
    </div>
</div>

твой css будет примерно таким 

.content-categories{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
.content-categories div{
    float:left;
    width:300px;
    height:300px;
}
#slider{
    width:900px;
    position:absolute;
    left:0;
}

Затем ваше действие по щелчку (при условии, что у вас есть изображение или стрелка или что-то с идентификатором, называемым слева) 

$('#left').click(function(){
    $('#slider').animate({left: '-300px'}, 1000, function(){
        $('#slider:first-child').clone().appendTo('#slider');
        $('#slider:first-child').remove();
        $('#slider').css('left', '0px');
    });
});

Таким образом, вы клонируете первого потомка, бросаете его в конец контейнера ползунка, затем удаляете клонированный элемент и возвращаете левую позицию обратно в ноль. Это должно быть без проблем ... пора бежать. надеюсь, это поможет

...