容器div中无限水平滚动的div集

Question

我正在尝试创建一个标识条带，当其中一个被选中时，会显示该客户的报价。当选择一个徽标时，它应该移到条带的左侧并停留在那里。我让它起作用了。

我的问题是让商标永远存在。

当徽标的div移出它们的容器时，我正在尝试删除它们，然后在条带的另一边重新创建它们，这样徽标就可以继续下去。然而，它运行得并不是很好。

这是html：

<div class="logo-strip">
                <div id="logo-1" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-2" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-3" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-4" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-5" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-6" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-7" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-8" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
            </div>

下面是CSS：

 div.logo-strip {
 display: flex;
 height: 70px;
 width: 100%;
 overflow: hidden; }

div.logo-strip div.logo {
  display: flex;
  min-width: 112.5px;
  padding: 5px;
  cursor: pointer;
  opacity: .4;
  transition: .5s; }

    div.logo-strip div.logo img {
    object-fit: contain; }

  div.logo-strip div.selected-logo {
  opacity: 1; }

下面是我的js：

( function( $ ) {


$('div#quote-1').removeClass('hidden');
$('div#quote-1').animate({'opacity' : '1'}, 500);
$('div#logo-1').addClass('selected-logo');

$('div.logo').click(function() {

    $('div.logo').removeClass('selected-logo');
    $(this).addClass('selected-logo');

    var logo_offset = $(this).offset().left - $('div.logo').first().offset().left;
    var negative_offset = logo_offset * -1;

    var strip_offset = $('div.logo-strip').offset().left - $('div.logo').first().offset().left;

    if (strip_offset >  100) {

        var to_be_cloned = $('div.logo').slice(0, 3);
        to_be_cloned.remove();
        $('div.logo').last().after(to_be_cloned);

    }

    console.log(strip_offset);
    console.log(to_be_cloned);

    $('div.logo').css({'transform' : 'translateX(' + negative_offset + 'px)'});

    var logo_id = $(this).attr('id');
    var logo_id_trimmed = logo_id.substr(5);

    $('div.customer-quote').addClass('hidden');
    $('div.customer-quote').css({'opacity' : '0'});
    $('div#quote-' + logo_id_trimmed).removeClass('hidden');
    $('div#quote-' + logo_id_trimmed).animate({'opacity' : '1'}, 500);
});

} )( jQuery );

基本上，我一直在尝试这样做:在第一个徽标与div.logo-strip容器元素保持一定距离后，它会删除那个徽标div，并在徽标divs的末尾重新创建它。它在某种程度上是有效的，但它像地狱一样不稳定。有人知道怎么做吗？

Answer 1

我想通了。

首先，所有的东西都在strangle周围移动，因为我删除了集合一端的div，而把它们放在了另一端，导致所有东西都移动了。我需要做的是克隆div并将它们放在末尾，所以我只是在末尾添加div，而不是从头开始删除它们。

其次，我需要获取先前选择的div和新选择的div的索引，并使用它们来创建切片编号。

第三，您需要通过测量新选择的div的左偏移量减去第一个div的左偏移量来移动整个div链。

第四，您需要从尾部区域之外的额外div开始。如果你没有，那么它在一开始就会变得很奇怪。

下面是新的JS：

$('div.logo').click(function() {
    var previously_selected = $('div.selected-logo');
    var newly_selected = $(this);
    var number_of_previous_selection = $('div.logo').index(previously_selected);
    var number_of_new_selection = $('div.logo').index(newly_selected);
    var selection_distance = number_of_previous_selection - number_of_new_selection;

    $('div.logo').removeClass('selected-logo');
    $(this).addClass('selected-logo');

    var logo_offset = $(this).offset().left - $('div.logo').first().offset().left;
    var negative_offset = logo_offset * -1;
    var strip_offset = $('div.logo-strip').offset().left - $('div.logo').first().offset().left;

    var to_be_cloned = $('div.logo').slice(number_of_previous_selection, number_of_new_selection).clone(true);
    $('div.logo-strip').append(to_be_cloned);
    $('div.logo').css({'transform' : 'translateX(' + negative_offset + 'px)'});

    console.log(number_of_new_selection);
    console.log(number_of_previous_selection);
    console.log(negative_offset);

    var logo_id = $(this).attr('id');
    var logo_id_trimmed = logo_id.substr(5);

    $('div.customer-quote').addClass('hidden');
    $('div.customer-quote').css({'opacity' : '0'});
    $('div#quote-' + logo_id_trimmed).removeClass('hidden');
    $('div#quote-' + logo_id_trimmed).animate({'opacity' : '1'}, 500);


});

然后是HTML：

<div class="quote-and-title">
                <div class="customer-quote hidden" id="quote-1">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-2">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-3">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-4">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-5">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-6">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-7">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-8">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-9">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-10">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-11">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="customer-quote hidden" id="quote-12">
                    <p class="customer-text">“Lorem ipsum dolor sit amet, consectetuer adipiscin elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet
                    dolore magna aliquam erat volutpat. Ut wisi enim ad
                    minim. Lorem ipsum dolor sit amet.”</p>
                    <p class="customer-title">John Smith, Facility Manager</p>
                </div>
                <div class="title has-red-divider-uptop">
                    <p>What The Industry is Saying</p>
                </div>
            </div>

            <div class="logo-strip">

                <div id="logo-1" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-2" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-3" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-4" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-5" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-6" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-7" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-8" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-9" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-10" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-11" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-12" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>

            </div>