<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css" /> </head> <style> .card_agent,.card_driver { border-radius: 5px; width: 28%; height: 43%; background: yellow; text-align: center; padding: 10px 5px; color: black; display: inline-block; margin: 5px 3px 10px; } .card_animation { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari and Chrome */ -o-animation: myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {transform: rotatey(0deg);} 100%{transform:rotatey(360deg);} } @-moz-keyframes myfirst /* Firefox */ { 0% {-moz-transform: rotatey(0deg);} 100%{-moz-transform:rotatey(360deg);} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {-webkit-transform: rotatey(0deg); /* Opera, Chrome, and Safari */} 100%{-webkit-transform:rotatey(360deg); /* Opera, Chrome, and Safari */} } @-o-keyframes myfirst /* Opera */ { 0% {-o-transform: rotatey(0deg);} 100%{-o-transform:rotatey(360deg);} } </style> <body> <div class="row"> <div class="col-xs-12" style="background-color: #1b1b1b; height: 268px; margin-top: -1px; color: #FFF"> <div class="row" style="height: 100%"> <div class="col-xs-6" style="height: 100%; padding: 0px;"> <h4>全国货代平均满意度</h4> <p class="text-center"> 4.52<span class="glyphicon glyphicon-arrow-up"></span>12.3% </p> <div style="border-right: 1px solid #FFF; height: 70%;"> <div class="card_agent"> <span class="glyphicon glyphicon-user"></span><br> <span class="ninth-font">王财发</span><br> <span>4.52</span> </div> <div class="card_agent"> <span class="glyphicon glyphicon-user"></span><br> <span class="ninth-font">王财发</span><br> <span>4.52</span> </div> <div class="card_agent"> <span class="glyphicon glyphicon-user"></span><br> <span class="ninth-font">王财发</span><br> <span>4.52</span> </div> <div class="card_agent"> <span class="glyphicon glyphicon-user"></span><br> <span class="ninth-font">王财发</span><br> <span>4.52</span> </div> <div class="card_agent"> <span class="glyphicon glyphicon-user"></span><br> <span class="ninth-font">王财发</span><br> <span>4.52</span> </div> <div class="card_agent"> <span class="glyphicon glyphicon-user"></span><br> <span class="ninth-font">王财发</span><br> <span>4.52</span> </div> </div> </div> </div></div></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> var cards_agent = $(‘.card_agent‘); var agent_cards; var a_this; var agentsArr = [ { name : "王财发", value : "4.29" }, { name : "肖老大", value : "4.88" }, { name : "肖老三", value : "4.38" }, { name : "立雄", value : "4.80" }, { name : "方军", value : "3.98" }, { name : "刘炜", value : "4.33" }, { name : "魏晨", value : "4.29" } ]; var nameArr = []; cards_agent.each(function(i) { $(this).find(‘.ninth-font‘).html(agentsArr[i].name); $(this).find(‘span:last‘).html(agentsArr[i].value); }); function replaceInfo(_this, cards) { var agent = agentsArr[Math.round(Math.random() * (agentsArr.length - 1))]; cards.find(‘.ninth-font‘).each(function(i) { nameArr[i] = $(this).html(); }); var flg = false; if ($.inArray(agent.name, nameArr) > -1) { //判断用户是否已经显示 flg = false; } ; while (!flg) { agent = agentsArr[Math.round(Math.random() * (agentsArr.length - 1))]; if ($.inArray(agent.name, nameArr) > -1) { flg = false; } else { flg = true; _this.find(‘.ninth-font‘).html(agent.name); _this.find(‘span:last‘).html(agent.value); } ; } } var r1; function ninth_cards(cards) { var tmp = Math.round(Math.random() * (cards.length - 1)); while (r1 == tmp) { //保证不让同一张牌连续翻转2次 tmp = Math.round(Math.random() * (cards.length - 1)); } cards.each(function(i) { if ($(this).hasClass(‘card_animation‘)) { $(this).removeClass(‘card_animation‘); } if (tmp == i) { $(this).addClass(‘card_animation‘); a_this = $(this); agent_cards = cards setTimeout(‘replaceInfo(a_this,agent_cards)‘, 2500); r1 = tmp; } }); } setInterval(ninth_cards, 5000, cards_agent); </script> </body> </html>
原文：http://www.cnblogs.com/wangqiang0323/p/3746138.html