javascript

                                         Slide Show

Javascript Livre (html), código para criar e mostrar a sua apresentação! 
ou 
Software para criar imagem e foto slide show em páginas html?

                   

a) O código java script livre vai criar uma imagem, slide show de imagem.
b) Você pode usar imagens em todos os diretórios diferentes como slideshow fotos.
c) Opções para ir para o próximo, anterior, iniciar e imagens finais.
d) Basta copiar o código na sua página e usá-lo para mostrar suas fotos como slides.

<script type="text/javascript">
var width = 250;
var height = 100;
var imgAr1 = new Array();
var rImg1 = new Array();
imgAr1[0] = "dir1/image-1.jpg";
imgAr1[1] = "dir1/image-2.jpg";
</script>
<table cellpadding=0 cellspacing=0><tr><td style="border: 2px ridge red;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px ridge red; font-size: 13px; 
 
font-family: verdana, arial;">
<td align=center><a style="color: blue; cursor:pointer;" 
 
onclick="start()">Start</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" 
 
onclick="slideshow()">Next</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" 
 
onclick="prev()">Prev</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" 
 
onclick="end()">End</a></td>
<td align=center><a href="Programador GB" style="color: 
 
blue; text-decoration: none; 
cursor:ponter; font-size: 13px;">&copy;H</a></td> 
</tr></table>
</td></tr></table>
<script type="text/javascript">
for(var j = 0; j < imgAr1.length; j++)
{
  rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}
document.onload = setting();
var slide;
function setting()
{
 slide = document.getElementById('pic');
 slide.src = imgAr1[0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
}
//função do slide
var picture = 0;
function slideshow(){
 if(picture < imgAr1.length-1){
  picture=picture+1;
  slide.src = imgAr1[picture];
 }
}
function prev(){
 if(picture > 0 ){
  picture=picture-1;
  slide.src = imgAr1[picture];
 }
}
function start(){
  slide.src = imgAr1[0];
  picture = 0;
}
function end(){
  slide.src = imgAr1[imgAr1.length-1];
  picture = imgAr1.length-1
}
</script>

a) Para alterar o tamanho da apresentação de slides, vá para a linha

var width = 250;
altura var = 100;

e alterar o valor de altura e largura para qualquer tamanho de pixel yo quiser.
b) Para definir as imagens para slideshow. Vá para a linha

imgAr1 [0] = "dir1/image-1.jpg";
imgAr1 [1] = "dir1/image-2.jpg";

Substitua os valores "dir1/image-1.jpg" e "dir1/image-2.jpg" para o caminho das suas imagens. você pode adicionar qualquer número de fotos para a matriz. Para adicionar mais uma foto

imgAr1 [2] = "dir1/image-3.jpg";

mais imagem pode ser adicionado como imgAr1 [3], imgAr1 [4], imgAr1 [5], de modo a ....

            Menu Slide Show

Um menu simples imagem Javascript com navegação imagem horizontal. Rollover o mouse sobre a imagem, a imagem desliza barra de menu aberto a partir do canto esquerdo da tela e movendo-se para fora o rato fará com que as imagens para deslizar para trás automaticamente. Este script é semelhante ao de um slideshow.

a) Os slides Abra a imagem Menus automaticamente onmouseover. 

b) certificado do menu Imagem simples rollover com navegação horizontal. 

c) Você pode configurar o menu apareça onmouseover ou rolar a imagem pelo usuário. 

d) Fácil de usar javascript roteiro menu de imagem de rolagem horizontal .

<script type="text/javascript" src="himagemenu/imagemenu.js"></script><table width="550px"><tr>
<td align="center" style="cursor:pointer;float:left;background: url(himagemenu/images/img1.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img1" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu1</a></td>

<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img2.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img2" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu2</a></td>

<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img3.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img3" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu3</a></td>

<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img4.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img4" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu4</a></td>

<td align=center style="cursor:pointer;float:left; background: url(himagemenu/images/img5.jpg) repeat scroll 0%; width:80px;height: 200px;border-color:white;border-style: solid;border-right-width:2px;border-left-width:0px;border-top-width:0px;border-bottom-width:0px;color:white;" id="img5" onmouseover="enlargeimg(this.id)" onmouseout="actualimg()"><a href='#' style='text-decoration:none;'>Menu5</a></td>

</tr>
<tr><td colspan=4><div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
<a href="Programador GB" id="dum" style="text-decoration:none; color: #3d366f;">&copy;hscripts.com</a>
</div>
</td></tr>
</table>

a) Baixe o arquivo zip e roteiro menus Descompacte slideshow -. imagemenu.zip, você receberá himagemenu / imagemenu.js, himagemenu / README.txt e imagens
. b) Apenas copie e cole o código em seu arquivo
c) Definir a imagem atraso de tempo de navegação menus, largura real / ajustar, endwidth e disposição tamanho como por sua exigência.
isto é, demora var = 100;
    var ActualWidth = 80;
    var adjustwidth = 60;
    var endwidth = 320;
    var arr = new Array ('img1' 'img2', 'img3', 'img4', 'img5'); / / Loja todos os ids de imagem para essa matriz. Se você quiser adicionar mais de 5 imagens inserir uma imagem na tabela. Aumentar o tamanho da matriz e largura da tabela também.
d) Definir as suas ligações em vez de símbolo '#' na tag href.
e) Simples e fácil de usar Javascript Scrolling / onmouseover Horizontal Script Menu de navegação de imagem.