Eu usei meu tempo livre para escrever um exemplo de navegação em uma única imagem quando estava aprendendo JavaScript:
A cópia do código é a seguinte:
<!
<html>
<head>
Galeria de Imagens </title>
<Meta name = "generator" content = "editplus">
<Meta name = "autor" content = "">
<Meta name = "Keywords" content = "">
</head>
<Script Language = "JavaScript">
Função Showpic (WHOMPpic) {
var fonte = whempic.getAttribute ("href"); // obtenha o valor do atributo href do elemento atualmente clicado
var someholder = document.getElementById ("espaço reservado"); // Obtenha o alvo
placeholder.setAttribute ("src", fonte); // defina o atributo de destino SRC para alterar a imagem
Var text = whempic.getAttribute ("title"); // Obtenha o valor do título de atributo do elemento atualmente clicado
var description = document.getElementById ("Descrição");
Descrição.FirstChild.NodEvalue = Text; // Atribua o título do elemento de clique para <p>
// ou description.ChildNodes [0] .NodEvalue = text;
}
</script>
<Body>
<H1> Javascript Picture Gallery </h1>
<ul>
<li>
<a href = "imagens/fogos de artifício
</li>
<li>
<a href = "imagens/café.jpg" onclick = "showpic (this); retornar false;"> figura 2 </a>
</li>
<li>
<a href = "imagens/rose.jpg" onclick = "showpic (this); retornar false;"> pic três </a>
</li>
<li>
<a href = "imagens/bigben.jpg" onclick = "showpic (this); retornar false;"> figura 4 </a>
</li>
</ul>
<img id = "placeholder" src = "imagens /placeholder.gif" />
<p id = "Descrição"> Selecione a imagem. </p>
</Body>
</html>
Perceber:
Devemos prestar atenção à adição de eventos à tag <a> </a> Para evitar que ela execute saltos.
Solução: a função retorna falsa; O evento acredita que o link não foi clicado.
Se o valor do href for JavaScript: void (0); Também não pode pular.