Tenho essa página html já feita..
mas gostaria de colocar um slide de 10 imagens no quadrado mais escuro..
que as imagens não passassem automaticamente, apenas quando se clicassem para passar..
que tivesse a opção de avançar e retroceder e também que tivesse uma lista dos números do slide na parte de cima...
como fazer um slide assim?
http://somosmugiwara.forumeiros.com/
mas gostaria de colocar um slide de 10 imagens no quadrado mais escuro..
que as imagens não passassem automaticamente, apenas quando se clicassem para passar..
que tivesse a opção de avançar e retroceder e também que tivesse uma lista dos números do slide na parte de cima...
como fazer um slide assim?
- Código:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
hr {
border-color: #fff;
}
#top5 {
display:none;
position: fixed;
left: 86.6%;
top: 97%;
color: #73AAFD;
font-family: "Courier New", Courier, monospace font-size:14px;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
opacity: 0.7;
-webkit-transition-duration: 1s;
background: rgb(27, 27, 27);
width: 20%;
-webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
}
#top5:hover {
height: 80%;
top: 47%;
opacity: 1;
}
#topo1 {
position: absolute;
left: 81%;
top: 1.5%;
color: rgb(211, 211, 211);
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
-webkit-transition-duration: 1s;
}
#topo2ip {
color: rgb(214, 214, 214);
display: inline;
}
#topo2 {
position: absolute;
top: 0%;
color: #73AAFD;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
background: transparent;
width: 98%;
-webkit-transition-duration: 1s;
border-bottom: 1px solid rgba(255, 255, 255, 0.53);
padding: 4px;
}
#RaidCallDESATIVADO {
position: absolute;
top: 1.5%;
color: #73AAFD;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
background: transparent;
width: 36%;
-webkit-transition-duration: 1s;
margin-left: 22%;
}
#RaidCall {
position: absolute;
left: 81%;
top: 0%;
color: #73AAFD;
font-weight: bold;
text-shadow: black 0.15em 0.15em 0.2em;
-webkit-transition-duration: 1s;
padding: 4px;
}
#RaidCallID {
color: rgb(214, 214, 214);
display: inline;
}
#topo2:hover {opacity: 1;}
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
background: transparent;
margin-left: 80%;
margin-top: -10%;
width: 17%!important;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: transparent;
color: #fff;
display: inline-block;
font-family: Game of Thrones;
line-height: 35px;
padding: 0 20px;
text-decoration: none;
border-radius: 3px;
font-size: 20px;
margin-left: 5px;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: right;
margin-top: -5px;
background: rgba(0, 0, 0, 0.04);
padding-top: 15px;
}
#cssmenu > ul > li {
float: center;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
}
#cssmenu > ul > li:hover > a {
background-image: url(http://i.imgur.com/zEd8czK.png);
background-position: 0px 15px;
background-repeat: no-repeat;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}
.menu {
width: 87.2%;
background: transparent;
margin-top: 4%;
position: absolute;
margin-left: 5%;
padding: 10px;
-webkit-border-radius: 7px 7px 0px 0;
color:#fff;
}
.menu a{
font-weight:bold;
color:#999999;
margin-right:35px;
text-decoration:none;
}
#tabela1 {
background: transparent;
width: 1%;
float: center;
height: 1%;
margin-top: 383px;
}
#tabela1 a{
text-decoration:none;
color:#000;
}
body{
background: #f4f4f4 url(http://i46.servimg.com/u/f46/11/96/49/61/body-b15.png);
color: #5a5a5a;
font: normal 11px tahoma,helvetica,arial,sans-serif;
padding-bottom: 20px;
}
.conectado {
margin-top: -2.9%;
margin-left: 6%;
position: absolute;
background: rgba(0, 0, 0, 0.18);
height: 37px;
box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
border: 1px solid rgba(0, 0, 0, 0.35);
width: 87%;
}
.botao {
font-weight: bold;
color: white;
float: left;
padding: 0 13px 9px 13px;
line-height: 36px;
outline: none;
height: 26px;
text-decoration: none;
}
.botao a {
color: white;
text-decoration: none;
}
.botao:hover {
background: rgba(0, 0, 0, 0.1);
}
#brunoh {
background-color: #fbfbfb;
border: 1px solid rgb(231, 231, 231);
padding: 6px;
}
.redesociais {
margin-left: 820px;
margin-top: -288px;
position: absolute;
}
#tabcont-brunoh {
padding: 10px;
width: 750px;
position: absolute;
margin-left: 100px;
background: rgba(0, 0, 0, 0.04);
z-index: 1;
min-height: 500px;
margin-top: -260px;
}
.copyright {
position: absolute;
margin-left: 600px;
margin-top: 264px;
color: #fff;
}
#menu body {
font-size:14px;
color:#666;
background:#111 no-repeat;
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#menu li {
list-style:none;
height:39px;
padding:2px;width:40px;
}
#menu span {
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#menu a {
background:url('http://i.imgur.com/k4eWI.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
#menu a:hover span {
width: 58px;
text-align: center;
padding: 0 5px;
overflow: visible;
}
#menu a:hover {
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
#menu .forum {
background-position:0 0;
}
#menu .forum:hover {
background-position: 0 -39px;
}
#menu .forum span {
background-color:#47d600;
color:#186123;
text-shadow:1px 1px 0 #45d14e;
}
#menu .designer {
background-position:-38px 0;
}
#menu .designer:hover {
background-position:-38px -39px;
}
#menu .designer span {
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
#menu .programacao {
background-position:-76px 0;
}
#menu .programacao:hover {
background-position:-76px -39px;
}
#menu .programacao span {
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
#menu .novos {
background-position:-114px 0;
}
#menu .novos:hover {
background-position:-114px -39px;
}
#menu .novos span {
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
#menu .mensagens {
background-position:-152px 0;
}
#menu .mensagens:hover {
background-position:-152px -39px;
}
#menu .mensagens span {
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="http://i69.servimg.com/u/f69/17/63/00/37/images10.png" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Somos Mugiwara Rpg Página de Criação</title>
</head>
<body>
<center><img src="http://i.imgur.com/m0TmOcq.png" style=" position: absolute; left: 150px; top: -20px;padding: 0px; width: 50%;">
<div id="tabcont-brunoh"><div id="tab1" style="display: block;"></div>
</div></center></div>
<center><div class="menu"><div id='cssmenu'>
<ul>
<li class='has-sub'><a href='http://somosmugiwara.forumeiros.com/h17-formulario-de-criacao-de-aventura'><span><img src="http://i.imgur.com/Qx9boES.png"></img></span></a></li><br>
<li class='has-sub'><a href='http://somosmugiwara.forumeiros.com/h18-formulario-de-criacao-de-tecnica'><span><img src="http://i.imgur.com/Q28sqSN.png"></img></span></a></li><br>
<li class='has-sub'><a href='http://somosmugiwara.forumeiros.com/h15-formulario-de-criacao-de-buff'><span><img src="http://i.imgur.com/69om21e.png"></img></span></a></li><br>
<li class='has-sub'><a href='http://somosmugiwara.forumeiros.com/h16-formulario-de-procura-de-narrador'><span><img src="http://i.imgur.com/uFtzAay.png"></img></span></a></li><br>
<li class='has-sub'><a href='http://somosmugiwara.forumeiros.com/h14-formulario-de-troca-de-narrador'><span><img src="http://i.imgur.com/U6KO8bf.png"></img></span></a></li><br>
</ul>
</div></div>
<div class="redesociais"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FSomos-Mugiwara-Rpg%2F130516183797519%3Fref%3Dhl&width=395&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false&appId=501201279907282" scrolling="no" frameborder="0" style="background: white; border:none; overflow:hidden; width:395px; height:258px;margin-top: -70px;margin-left: 90px;" allowtransparency="true"></iframe></div>
<div class="copyright">Copyright ® Somos Mugiwara Rpg</div>
<table id="tabela1">
<td><center></table></center>
<div style="position: fixed; top: 17%; left: -40px;">
<ul id="menu">
<li>
<a class="forum" href="http://somosmugiwara.forumeiros.com/forum">
<span>
Fórum
</span>
</a>
</li>
<li>
<a class="designer" href="http://somosmugiwara.forumeiros.com/">
<span>
Inicio
</span>
</a>
</li>
<li>
<a class="programacao" href="http://somosmugiwara.forumeiros.com/f5-regras-gerai">
<span>
Regras
</span>
</a>
</li>
<li>
<a class="novos" href="http://somosmugiwara.forumeiros.com/portal">
<span>
Portal
</span>
</a>
</li>
<li>
<a class="mensagens" href="http://somosmugiwara.forumeiros.com/privmsg?folder=inbox">
<span>
MP´s
</span>
</a>
</li></ul>
</div>
</body>
</html>
<a href="http://www.forumeiros.com" target="_blank" style="display: none;"> Fórumeiros</a>
http://somosmugiwara.forumeiros.com/