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>";
?>

随机化我的画廊图像

2 个答案: