隨機化我的畫廊圖像

Question

我有一個使用投票演員的網站。 我想將每次重新加載的圖像隨機化。 我寫了這個javascript源代碼來顯示我的圖像。

<script type="text/template" id="player-template">

<% _.each(players, function(player) { %>
    <div class='playerWrap'>

        <div id='img'><img src='<?php echo CANVAS; ?>include/view.php?src=<?php echo CANVAS; ?>images/<%= player.player_pic%>&wh=140,161&c=1' /></div>

        <div id='name'><%= player.player_fname%></div>

        <div id='viewinfo'><span class="btn btn-sm" data-toggle="modal" data-playerId="<%= player.player_id%>" data-target="#showPlayerInfo">Details</span></div>

    </div>



<% }); %>

如何使用JavaScript或PHP隨機播放此代碼圖像。 我使用此JavaScript代碼進行隨機化。 但只顯示一張圖片。

    <script type="text/javascript">


  var random = Math.floor(Math.random() * $('.playerWrap').length);
  $('.playerWrap').hide().eq(random).show();

</script>

Answer 1

使用此功能可以隨機播放

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
   randomIndex = Math.floor(Math.random() * currentIndex);
   currentIndex -= 1;
   temporaryValue = array[currentIndex];
   array[currentIndex] = array[randomIndex];
   array[randomIndex] = temporaryValue;
  }
 return array;
}

var imagearray= [2, 11, 37, 42];//here your object array should be present 
imagearray= shuffle(imagearray);
console.log(imagearray);

Answer 2

我修改此php代碼以查看圖像

<?php

        $perPage = 6;
        $pageNo = isset($_GET['page']) ? $_GET['page'] : 0;
        $offset = $perPage * $pageNo;

        $topVotedPlayers = $user->getTopVotedPlayers($offset, 20);

        foreach($topVotedPlayers as $topVoted){
            echo "<div class='col-md-4 col-sm-6 col-xs-12'>";
            echo "<div class='playerWrap' id='player_{$topVoted['player_id']}' data-playerId=".$topVoted['player_id'].">";
            echo "<div id='img'><img class='img-responsive' src='".CANVAS."include/view.php?src=".CANVAS."images/{$topVoted['player_pic']}&wh=500,600&c=1' /></div>";
  echo "<div id='name'>{$topVoted['player_fname']} {$topVoted['player_lname']}</div>";
  echo "<div id='sport_name'>{$topVoted['player_desc']}</div>";
?>