Simplificar código Javascript

Detalhes da questão

Endereço do fórum: http://somosmugiwara.forumeiros.com/
Versão do fórum: PunBB

Descrição

Olá manolos, observe o código abaixo.
Gostaria de saber se tem como deixar a instalação de mais itens mais fácil, pois quando adiciono outro código de imagem, o mesmo não funciona.
Como funciona este código?

Código:


<div id="proco" style="display: block;">
         <script>
      function TrocaBanner() {
         var w = 1;
         w = Math.floor(Math.random()*10);
         if(w < 5 ){
            document.write('<a href="http://www.onepiecerpg.com/t37376-frisk-dreemur" title="Anjo Caído"><img src="http://i.imgur.com/3QX0jwT.png" align="middle"></a>');
            return(0);
         }else if(w < 7){
            document.write('<a href="http://www.onepiecerpg.com/t38071-yoroshi-auron-o-usurpador" title="O Usurpador"><img src="http://i.imgur.com/GZYFLI0.png" align="middle"></a>');
            return(0);
         }else {
            document.write('<a href="http://www.onepiecerpg.com/t38070-ryuza-ying-o-ultimo-sussurro" title="O Ultimo Sussurro"><img src="http://i.imgur.com/dXqsoqo.png" align="middle"></a>');
            return(0);
         }
      }
   </script> <script>TrocaBanner()</script>
            
</div>


Tente:

Código:

<div id="proco"></div>

<script>
   (function($) {
      'use strict';
      
      var banners = [
         {
            href: '/t37376-frisk-dreemur',
            title: 'Anjo Caído',
            image: 'http://i.imgur.com/3QX0jwT.png',
         }, {
            href: '/t38071-yoroshi-auron-o-usurpador',
            title: 'O Usurpador',
            image: 'http://i.imgur.com/GZYFLI0.png',
         }, {
            href: '/t38070-ryuza-ying-o-ultimo-sussurro',
            title: 'O Último Sussurro',
            image: 'http://i.imgur.com/dXqsoqo.png',
         }
      ];
      
      var banner = banners[~~(Math.random() * banners.length)];
      
      $('#proco').append([
         '<a href="' + banner.href + '" title="' + banner.title + '">,
         '    <img src="' + banner.image + '" alt="' + banner.title + '" />
         '</a>',
      ].join('\n'));
   }(jQuery));
</script>

É só seguir o padrão da Array de banners para adicionar mais banners. o/

Thanks mano, consegui entender o código e também estou testando o seu.

#Obrigado