Código de slide

Qual é minha questão:


Gostaria de um Código de Slide para meu fórum cujo fosse simples e funcional... Gostaria que passassem estas três imagens nele com três Links distintos:

https://2img.net/h/i1077.photobucket.com/albums/w462/kusanagi-sama/anime306_zpsd824d825.png:original

https://2img.net/h/i1077.photobucket.com/albums/w462/kusanagi-sama/Reuniatildeodoskagescarecas_zps64ec1130.png:original

https://2img.net/h/i1077.photobucket.com/albums/w462/kusanagi-sama/Mangaacute625_zps18f2a4c0.png:original

Eu sei um pouco sobre CSS, mas pelo que sei isto é código Java, algo que me perco tentando mexer. Esse SlideShow vai para os anúncios e eu também queria de uma indicação de como ajeitar o código que me derem, por que semanalmente os Slides serão mudados. Obrigada.

Endereço do meu fórum:
http://naruto-tebane.forumeiros.com

Versão do fórum:
PHPBB3

Olá! Queira Por Favor tentar este código:

Código:

<style type="text/css">
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; display:none}
#wrapper * {margin:0; padding:0}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(http://i.imgur.com/2swMA.gif) left center no-repeat}
#imgnext {right:0; background:url(http://i.imgur.com/gpQMw.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://i.imgur.com/S3DyJ.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://i.imgur.com/VIMIj.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://i.imgur.com/RjDRW.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
  </style>
  <ul id="slideshow">
      <li>
        <h3>Converse com a galera</h3>
        <span>http://i.imgur.com/ktyUm.png</span>
        <p>Una-se agora ao nosso Chatbox e converse com os membros do fórum.</p>
        <a href="javascript:open('/#bottom');"><img src="http://i.imgur.com/2v6bh.png"></a>
      </li>
      <li>
        <h3>Design</h3>
        <span>http://i.imgur.com/zmmeW.jpg</span>
        <p>Veja agora como aprender a ser um Designer e muito mais...</p>
        <a href="javascript:open('/c4-area-grafica');"><img src="http://i.imgur.com/ZIesa.png"></a>
      </li>
  <li>
        <h3>Habbo</h3>
        <span>http://i.imgur.com/ie8xD.png</span>
        <p>Você joga Habbo ou tem um servidor privado? Veja mais.</p>
        <a href="javascript:open('/f2-area-habbo-hotel');"><img src="http://i.imgur.com/GDHWq.png"></a>
      </li>
      <li>
        <h3>Minecraft</h3>
        <span>http://i.imgur.com/VhJ8N.jpg</span>
        <p>Jogue agora o melhor game de construção de todos os tempos.</p>
        <a href="javascript:open('/f7-zone-minecraft');"><img src="http://i.imgur.com/eX3Pw.png"></a>
      </li>
      <li>
        <h3>Transformice</h3>
        <span>http://i.imgur.com/EmvJp.png</span>
        <p>Você é um ratinho comilão? Se joga Transformice tenha o melhor acervo aqui.</p>
        <a href="javascript:open('/f6-zone-transformice');"><img src="http://i.imgur.com/Ny1rF.png"></a>
      </li>
      <li>
        <h3>GTA</h3>
        <span>http://i.imgur.com/XyOhO.jpg</span>
        <p>Você joga GTA? Então está no lugar certo, clique e veja mais.</p>
        <a href="javascript:open('/f9-zone-gta');"><img src="http://i.imgur.com/JO0Rj.png"></a>
      </li>
      <li>
        <h3>Entretenimento</h3>
        <span>http://i.imgur.com/e0NxJ.png</span>
        <p>Está entediado, quer mais diversão? Então clique e veja o que temos de melhor</p>
        <a href="javascript:open('/c7-entretenimento');"><img src="http://i.imgur.com/9DS61.png"></a>
      </li>
  </ul>
  <div id="wrapper">
      <div id="fullsize">
        <div id="imgprev" class="imgnav" title="Voltar"></div>
        <div id="imglink"></div>
        <div id="imgnext" class="imgnav" title="Próxima"></div>
        <div id="image"></div>
        <div id="information">
            <h3></h3>
            <p></p>
        </div>
      </div>
      <div id="thumbnails">
        <div id="slideleft" title="Primeiros"></div>
        <div id="slidearea">
            <div id="slider"></div>
        </div>
        <div id="slideright" title="Últimos"></div>
      </div>
  </div>
<script type="text/javascript" src="http://pproxy.webs.com/css/compressed.js"></script>
<script type="text/javascript">
  $('slideshow').style.display='none';
  $('wrapper').style.display='block';
  var slideshow=new TINY.slideshow("slideshow");
  window.onload=function(){
      slideshow.auto=true;
      slideshow.speed=5;
      slideshow.link="linkhover";
      slideshow.info="information";
      slideshow.thumbs="slider";
      slideshow.left="slideleft";
      slideshow.right="slideright";
      slideshow.scrollSpeed=4;
      slideshow.spacing=5;
      slideshow.active="#fff";
      slideshow.init("slideshow","image","imgprev","imgnext","imglink");
  }
</script>

Agrada-lhe o código?
Pode Modifica-lo á seu Gosto.
Cordiais Despedidas.
Freddie.

Saudações!

Aceda em:
Painel de Controle Visualização Home Page Geral

Código:

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/03/fabrica-de-herois.html"><img src="http://img844.imageshack.us/img844/7389/fabricadeherois.jpg" width="510px" height="250px">
</a><span style="display: none; ">
</span></li>

<li class="s3sliderImage" style="display: list-item; opacity: 0.3321098053037097; ">
<a href="http://www.hiperxp.com/2012/04/pwi-descent-nova-instancia.html"><img src="http://img839.imageshack.us/img839/4937/endlessuniverse.jpg" width="510px" height="250px">
</a><span style="display: none; ">
</span></li>

<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/01/regras-e-informacoes-para-os-eventos-do.html">
<img src="http://2.bp.blogspot.com/-3CtTtC-51oY/Tx8--LY8F2I/AAAAAAAAALQ/FuVwydGOcJg/s1600/Hiper+regras.jpg" width="510px" height="250px"></a><span style="display: none; ">Participe dos Eventos valendo Gold, mas antes leia as Regras. Já saíram vários prêmios.</span>
</li>


<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/04/entrevista-com-trayce-daddato-mes-das.html"><img src="http://img198.imageshack.us/img198/1189/hiperxp666666.png" width="510px" height="250px">
</a><span style="display: none; "> Entrevista com Roora - Mês das Mulheres
</span></li>


<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/02/nota-mudanca-no-contato-com-hiperxp.html"><img src="http://img205.imageshack.us/img205/4758/24028986.jpg" width="510px" height="250px">
</a><span style="display: none; ">
</span></li>



<div class="clear s3sliderImage"></div>
</ul>
</div></center>

Adicione na 'Folha de estilo CSS':
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

#s3slider {
background:#000000; /* edite cor de fundo*/
border:1px solid #1e1125; /* edite borda do slide*/
width: 510px; /* largura total do slide*/
height: 250px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 510px; /* as imagens devem ter a mesma largura ou mais - você pode editar a largura se quiser */
position: absolute; /* important */
top: -3px; /* important */
padding: 0px;
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 20px Verdana, sans-serif;
padding: 10px 0px;
width: 510px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none; /* important */
bottom: 0;
text-align:left;
}
.clear {
clear: both;
}

Até mais!

Olá,

Não fornecemos suporte à javascript ou jQuery, tampouco é permitido pelas regras do FdF criar templates ou partes de templates para membros. Tente algum dos códigos fornecidos ou utilize o Google para encontrar um slideshow de sua preferência. Existem muitos slides baseados em CSS que podem ser utilizados.

Cordialmente
The Boss

(Desculpe Boss. Peço permissão para tirar uma dúvida sobre isso, que eu creio ser a última)

Bem, mexi bastante e funcionou este abaixo... Mas não consigo centralizar o Slide nos anúncios ou em um Widget (para onde na verdade NÃO vai o Slide). Já tentei usar o código de Center CSS e HTML e etc, só que não deu certo. Podem me ajudar só com essa dúvida final? Só essa vai.

Código:

<div style="margin:auto;text-align:center;width:100%">    <style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:200px}.picshow_main{position:relative;width:310px;height:200px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:310px;height:200px}.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:5px;left:60px}.picshow_change img{width:15px;height:15px}.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}a.axx{border-color:#555}a.axx:hover{border-color:#000}a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}a.bxx{border-color:#000}a.bxx:hover{border-color:#000}img{border:0px}</style>
        <script>var counts = 3;
        img1 = new Image();
        img1.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/anime306_zpsd824d825.png:original';
        img2 = new Image();
        img2.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Reuniatildeodoskagescarecas_zps64ec1130.png:original';
        img3 = new Image();
        img3.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Mangaacute625_zps18f2a4c0.png:original';
        var smallImg = new Array();
        smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
        smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
        smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';

        url1 = 'http://naruto-tebane.forumeiros.com/t2334-anime-episodio-306#48788/';
        url2 = 'http://naruto-tebane.forumeiros.com/t192p75-amegakure-terceira-reuniao-dos-kages#48803/';
        url3 = 'http://naruto-tebane.forumeiros.com/t2283-comentarios-naruto-manga-625/';
        url4 = 'http://www.monsterhunterbrasil.com';
        url5 = 'http://narutorpgstorm.ultimaterpg.net/';
        alt1 = new Image();
        alt1.alt = 'SP-Design';
        alt2 = new Image();
        alt2.alt = 'Naruto Reborn';
        alt3 = new Image();
        alt3.alt = 'Brasil Designer Forever';
        alt4 = new Image();
        alt4.alt = 'Brasil Designer Forever';
        alt5 = new Image();
        alt5.alt = 'Brasil Designer Forever';
        var nn = 1;
        var key = 0;
        function change_img() {
        if (key == 0) {
        key = 1;
        } else if (document.all) {
        document.getElementById("pic").filters[0].Apply();
        document.getElementById("pic").filters[0].Play(duration = 2);
        }
        eval('document.getElementById("pic").src=img' + nn + '.src');
        eval('document.getElementById("url_theme").href=url' + nn);
        eval('document.getElementById("pic").alt=alt' + nn + '.alt');
        if (nn == 1) {
        document.getElementById("url_theme").target = "_blank";
        document.getElementById("url_theme").style.cursor = "pointer";
        } else {
        document.getElementById("url_theme").target = "_blank"
        document.getElementById("url_theme").style.cursor = "pointer"
        }
        for ( var i = 1; i <= counts; i++) {
        document.getElementById("xxjdjj" + i).className = 'axx';
        }
        document.getElementById("xxjdjj" + nn).className = 'bxx';
        nn++;
        if (nn > counts) {
        nn = 1;
        }
        tt = setTimeout('change_img()', 4000);
        }
        function changeimg(n) {
        nn = n;
        window.clearInterval(tt);
        change_img();
        }
        function ImageShow() {
        document.write('<div class="picshow_main">');
        document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
        document.write('<div class="picshow_change">');
        for ( var i = 0; i < counts; i++) {
        document.write('<a href="javascript:changeimg(' + (i + 1)
        + ');" id="xxjdjj' + (i + 1)
        + '" class="axx" target="_self"><img src="' + smallImg[i]
        + '"></a>');
        }
        document.write('</div></div>');
        change_img();
        }</script>
        <script>ImageShow()</script></div>


Olá,

Tente este código:

Código:

<div style="margin:auto;text-align:center;width:100%; margin-left: 30%;"><style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:200px}.picshow_main{position:relative;width:310px;height:200px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:310px;height:200px}.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:5px;left:60px}.picshow_change img{width:15px;height:15px}.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}a.axx{border-color:#555}a.axx:hover{border-color:#000}a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}a.bxx{border-color:#000}a.bxx:hover{border-color:#000}img{border:0px}</style>
        <script>var counts = 3;
        img1 = new Image();
        img1.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/anime306_zpsd824d825.png:original';
        img2 = new Image();
        img2.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Reuniatildeodoskagescarecas_zps64ec1130.png:original';
        img3 = new Image();
        img3.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Mangaacute625_zps18f2a4c0.png:original';
        var smallImg = new Array();
        smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
        smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
        smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';

        url1 = 'http://naruto-tebane.forumeiros.com/t2334-anime-episodio-306#48788/';
        url2 = 'http://naruto-tebane.forumeiros.com/t192p75-amegakure-terceira-reuniao-dos-kages#48803/';
        url3 = 'http://naruto-tebane.forumeiros.com/t2283-comentarios-naruto-manga-625/';
        url4 = 'http://www.monsterhunterbrasil.com';
        url5 = 'http://narutorpgstorm.ultimaterpg.net/';
        alt1 = new Image();
        alt1.alt = 'SP-Design';
        alt2 = new Image();
        alt2.alt = 'Naruto Reborn';
        alt3 = new Image();
        alt3.alt = 'Brasil Designer Forever';
        alt4 = new Image();
        alt4.alt = 'Brasil Designer Forever';
        alt5 = new Image();
        alt5.alt = 'Brasil Designer Forever';
        var nn = 1;
        var key = 0;
        function change_img() {
        if (key == 0) {
        key = 1;
        } else if (document.all) {
        document.getElementById("pic").filters[0].Apply();
        document.getElementById("pic").filters[0].Play(duration = 2);
        }
        eval('document.getElementById("pic").src=img' + nn + '.src');
        eval('document.getElementById("url_theme").href=url' + nn);
        eval('document.getElementById("pic").alt=alt' + nn + '.alt');
        if (nn == 1) {
        document.getElementById("url_theme").target = "_blank";
        document.getElementById("url_theme").style.cursor = "pointer";
        } else {
        document.getElementById("url_theme").target = "_blank"
        document.getElementById("url_theme").style.cursor = "pointer"
        }
        for ( var i = 1; i <= counts; i++) {
        document.getElementById("xxjdjj" + i).className = 'axx';
        }
        document.getElementById("xxjdjj" + nn).className = 'bxx';
        nn++;
        if (nn > counts) {
        nn = 1;
        }
        tt = setTimeout('change_img()', 4000);
        }
        function changeimg(n) {
        nn = n;
        window.clearInterval(tt);
        change_img();
        }
        function ImageShow() {
        document.write('<div class="picshow_main">');
        document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
        document.write('<div class="picshow_change">');
        for ( var i = 0; i < counts; i++) {
        document.write('<a href="javascript:changeimg(' + (i + 1)
        + ');" id="xxjdjj' + (i + 1)
        + '" class="axx" target="_self"><img src="' + smallImg[i]
        + '"></a>');
        }
        document.write('</div></div>');
        change_img();
        }</script>
        <script>ImageShow()</script></div></center>

Cordialmente,
The Boss

Obrigada! Resolvido!