Question

我们有一个自定义内容滑块，由无序列表组成。有一个控制内容幻灯片的功能，然后我们还有一个功能，可以动态创建寻呼机按钮，允许用户在幻灯片之间单击后退和第四个，标记为数字1-6。

我正在尝试随机化内容幻灯片的顺序，以便每次加载页面时都不会出现相同的幻灯片组合，但是寻呼机仍保留其动画的顺序。

这些功能在这里：

/**
 * Prepare a rotator
 * @return null
 */
(function($)
{
    $.fn.prepRotator = function()
    {
        return this.each(function()
        {
            // Set the navigation
            var count = $(this).children().length;
        for (i = 1; i <= count; i++)
            {
                $(this).siblings('#rotatorNavigation').append("<a href='#'      name='" + i + "'>" + i + "</a>");
            $(this).children(':eq(' + (i-1) + ')').attr('name', i);
        }
        $(this).children().preload();
        $(this).siblings('#rotatorNavigation').find('a:first').addClass('active');


        // Set the rotation
        function rotate()
        {

            if ($('.rotator li.active').next('li').length > 0)
                $('.rotator li.active').next('li').showRotatorItem();
            else
                $('.rotator li:first').showRotatorItem();
            globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
        }
        globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);


        // Set the buttons
        $('#rotatorNavigation a').unbind('click').click(function()
        {
            $(".rotator").find("li[name='" + $(this).attr('name') + "']").showRotatorItem();
            clearTimeout(globals.RotatorTimeout);
            globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
            return false;
        });
    });
};
})(jQuery);


/**
 * Show the given rotator item
 * @return null
 */
(function($)
{
$.fn.showRotatorItem = function()
{
    return this.each(function()
    {
        $(this).siblings('.active').removeClass('active').fadeOut();
        $(this).fadeIn().addClass('active');
        $('#rotatorNavigation a.active').removeClass('active');
        $('#rotatorNavigation').find("a[name='" + $(this).attr('name') + "']").addClass('active');
        var num = Number($(this).attr('name'));
        $('#rotatorNavigation span.triangle').animate(
        {
            left:       $('#rotatorNavigation a.active').position().left + (num > 9 ? 14 : 11)
        }, 'fast');
    });
};
})(jQuery);

然后内容幻灯片的结构如下所示：

<ul id="homeRotator" class="rotator">
  <li class="active">
  <a href="products/parts">
    <span class="back">
    <img alt="Tool" src="images/homepage/rotator/tool.jpg" width="960" height="364" />
    <span class="heading">
      <br />Keep a good thing going.
    </span>
    </span>
    <span class="desc">
    <img alt="2-Cycle parts" src="images/homepage/img-2-cycle-parts.jpg" width="287" height="204" />
        <span class="copy">
          Genuine Detroit Diesel 2-Cycle parts are built to the latest engineering
specifications, resulting in uncompromised quality.
    </span>
    <span class="link">> Parts</span>
    </span>
  </a>
  </li>
<li>
  <a href="about/heritage">
    <span class="back">
    <img alt="Green Engine" src="images/homepage/rotator/img-detroit-diesel-engine-green.jpg" width="960" height="364" />
    <span class="heading">
      <br />A legacy of excellence.
    </span>
    </span>
    <span class="desc">
    <img alt="GM Diesel Flag" src="images/homepage/img-heritage.jpg" width="287" height="204" />
    <span class="copy">
          Since 1938, our engines have powered entire industries, including construction,
agricultural, marine, oil and gas, mining, rail, power generation and defense.
    </span>
    <span class="link">> Heritage</span>
    </span>
  </a>
  </li>
<li>
  <a href="stories-gallery/overview">
    <span class="back">
    <img alt="Deception Motor Master" src="images/homepage/rotator/decepticon.jpg" width="960" height="364" />
    <span class="heading">
          Reports from the field. 
      <br />Water. And road.
    </span>
    </span>
    <span class="desc">
    <img alt="Deception Motor Master" src="images/homepage/eng_ine.jpg" width="287" height="204" />
    <span class="copy">
      Read stories about earth movers, hot rods, ferries, yachts, trucks and more. All
  powered by Detroit Diesel 2-Cycle engines.
    </span>
    <span class="link">> Stories</span>
    </span>
  </a>
  </li>
 <li>
  <a href="contact/sales-and-service-locator">
    <span class="back">
    <img alt="Reliabuilt 92 Engine" src="images/homepage/rotator/img-reliabuilt-92-engine.jpg" width="960" height="364" />
    <span class="heading">
      <br />Local support. Worldwide.
    </span>
    </span>
    <span class="desc">
    <img alt="MTU Clock Screensaver" src="images/homepage/img-distributor-locator.jpg" width="287" height="204" />
    <span class="copy">
      No matter where you are, MTU’s global sales and service network is committed to 
      providing you with genuine Detroit Diesel 2-Cycle parts, service and assistance.
    </span>
    <span class="link">> Sales and service locator</span>
    </span>
  </a>
  </li>
<li>
  <a href="extras/gallery/official-gallery">
    <span class="back">
    <img alt="Reliabuilt 92 Engine" src="images/homepage/rotator/pete.jpg" width="960" height="364" />
    <span class="heading">
      <br />Metal and machines on display.
    </span>
    </span>
    <span class="desc">
    <img alt="2-Cycle Distributor Locator" src="images/homepage/marines.jpg" width="287" height="204" />
    <span class="copy">
      View photos and videos of 2-Cycle-powered vehicles and equipment, 
      product shots and historical images. Or submit your own. 
    </span>
    <span class="link">> Gallery</span>
    </span>
  </a>
  </li>
  <li>
    <a href="products/engines">
      <span class="back">
      <img src="images/homepage/rotator/img-engine-close-up.jpg" width="960" height="364" />
      <span class="heading">
        <br />A powerful commitment.
      </span>
      </span>
      <span class="desc">
          <img alt="Close up of 2-Cycle Engine" src="images/homepage/img-detroit-diesel-engine-cu.jpg" width="287" height="204" />
      <span class="copy">
        As the sole owner of the Detroit Diesel 2-Cycle product line, MTU is committed to
  providing parts, service and support for the long term.
      </span>
      <span class="link">> Engines</span>
      </span>
    </a>
    </li>


</ul>

这是寻呼机的html结构

<div id="rotatorNavigation">

      <span class="triangle"></span>

    </div>
    <div id="flameBottom">

      <div class="left">
        <h1>Detroit Diesel 2-Cycle</h1>
        <div class="purpleCornerLeft"></div>
      </div>


      <div class="right">

        <a class="find-a-distributor" href="contact/sales-and-service-locator">
          <span class="img">
            <img src="images/homepage/img-small-engine.png" />
          </span>
          <span class="copy">
            <span class="heading">
              Sales and service locator
            </span>
            <span class="cta">
              > Search
            </span>
          </span>
        </a>

        <a class="got-a-story" href="stories-gallery/overview">
          <span class="img">  
            <img src="images/homepage/img-notepad.png" />
          </span>
          <span class="copy">  
            <span class="heading">
              2-Cycle stories
            </span>
            <span class="cta">
              > Read and share your own
            </span>
          </span>
        </a>

        <div class="grayCornerRight"></div>

      </div>


    </div>

我只是难以将整个事情随机化。我可以让它随机化第二张幻灯片，但它仍保留相同的顺序 - 这不是我想要的。我希望整个事情完全随机。任何帮助/见解将不胜感激！

我已经考虑过复制ul 6x然后在页面加载时显示一个随机版本，但是当我知道有些东西按原样随机化时，这似乎太多余了。

Answer 1

上面的代码比我现在可以查看的要多一些，但假设可以重写内容，而不是简单地以不同的顺序显示它们，你可以将幻灯片内容拉成jQuery包装集，随机播放设置，并用新内容替换homeRotator UL的内容：

// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

var $slides = $('#homeRotator li');
$slides = shuffle($slides);
$('#homeRotator').empty().prepend($slides);

小提琴演示：http://jsfiddle.net/Palpatim/7rzE4/

如果没有，那么你可以用任何指针

做类似的事情

随机化jQuery滑块内容（ul），同时保留幻灯片寻呼机的顺序

1 个答案: