Esse é um exemplo bem simples de como criar uma interface com o usuário diferente das disponíveis em HTML puro, utilizando os conceitos de HTML, JavaScript e DOM vistos em sala de aula durante o curso.

Para utilizar o slider de imagens, basta criar uma instância da classe ImageSlider logo que a página é carregada, passando os argumentos de configuração desejados, como no exemplo abaixo (que é o mesmo código utilizado para criar o slider de imagens mostrado acima):

new ImageSlider(document.getElementById("dfddfdf"), "250px", "250px", 750, 5000, "FUNDO", "", "", null, null,true, "\u25C2", "SETA_ESQ", "\u25B8", "SETA_DIR",
    "HoverBarCr.png", "Minhas Coisas...", 0, 0,
    "/Images/analyzer.png", "Graphical Filter Editor", 0, 0,
    "HoverBarFb.png", "Facebook", 0, 0,
    "HoverBarGo.png", "Google", 0, 0,
    "HoverBarGm.png", "Gmail", "100%", "100%",
    "HoverBarTw.png", "Twitter", 0, 0
);

Os argumentos do construtor têm o seguinte significado:

  1. Elemento onde criar o slider (normalmente será um div vazio, apenas com o id apropriado)
  2. Largura do slider (uma string, ou um valor numérico que será transformado em pixels)
  3. Altura do slider (uma string, ou um valor numérico que será transformado em pixels)
  4. Tempo, em milissegundos, para a transição entre as imagens (0 significa sem animação)
  5. Tempo, em milissegundos, depois do qual o slider irá automaticamente alterar para a próxima imagem (0 significa sem comportamento automático)
  6. Nome da(s) classe(s) aplicada(s) ao elemento principal (o div vazio, passado como primeiro argumento)
  7. Nome da(s) classe(s) aplicada(s) ao container das imagens
  8. Nome da(s) classe(s) aplicada(s) às imagens
  9. Função chamada quando o usuário clicar sobre o slider, com o formato function handler(button, x, y) onde button é o botão clicado e x e y são as coordenadas, relativas ao slider, de onde ocorreu o clique
  10. Função chamada quando uma transição termina, com o formato function handler(from, to) onde from é o índice da imagem anterior e to é o índice da imagem atual
  11. Indica se as setas serão exibidas
  12. Texto da seta esquerda (pode ser vazio)
  13. Nome da(s) classe(s) aplicada(s) à seta esquerda
  14. Texto da seta direita (pode ser vazio)
  15. Nome da(s) classe(s) aplicada(s) à seta direita

Os argumentos finais especificam as imagens desejadas. Para cada imagem são necessários quatro argumentos:

  1. Endereço da imagem
  2. Texto alternativo da imagem
  3. Largura da imagem, ou 0/null/undefined/"" para utilizar o tamanho original (uma string, ou um valor numérico que será transformado em pixels)
  4. Altura da imagem, ou 0/null/undefined/"" para utilizar o tamanho original (uma string, ou um valor numérico que será transformado em pixels)

Caso seja fornecido um tratador para o clique, o as imagens não serão alteradas automaticamente. O usuário será responsável por alterar as imagens, através de algum dos métodos explicados abaixo.

Métodos da classe ImageSlider:

Esses são os atributos da classe ImageSlider que podem ser alterados depois do objeto ter sido instanciado:

Esses são alguns atributos classe ImageSlider que, apesar de úteis, não devem ser alterados manualmente:

A classe ImageSlider ainda possui o atributo currentIndex, que representa o índice da imagem atual. Apesar desse atributo poder ser alterado, nenhuma mudança visual ocorrerá ao se alterar o atributo. Ele só é utilizado como controle/guia para os métodos next(), previous() e changeTo(to).

Caso você deseje personalizar ainda mais a aparência do slider, acrescentando novos elementos, como um contador de slides, você deve saber que a imagem do fundo possui z-index 0, a imagem da frente possui z-index 1, e as setas, quando presentes, possuem z-index 2.

Dê uma olhada no código fonte desta página para um exemplo completo de como utilizar, inclusive com o código dos estilos utilizados no exemplo (FUNDO, SETA_ESQ e SETA_DIR).

O código para fazer a classe ImageSlider funcionar pode ser baixado nos links abaixo:
ImageSlider.js
ImageSlider.css