Este artigo descreve o método do JS para realizar o efeito de comutação da imagem do slide flash. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<meta http-equiv = "content-language" content = "gb2312" />
<meta name = "autor" content = "Rainoxu" />
<Title> JS simula o efeito de comutação de flash slide </title>
</head>
<Body>
<style type = "text/css">
/ * <! [CDATA [ */
ul, li {
preenchimento: 0;
margem: 0;
estilo de lista: nenhum;
}
#flashbox {
Largura: 326px;
Altura: 246px;
borda: 1px sólido #eee;
Posição: relativa;
}
#flashbox img {
/*Não mostre inicialmente*/
Exibir: Nenhum;
/* Use bordas para alcançar espaços vazios, porque a margem e o encadeamento às vezes podem causar alguns problemas*/
Border: 3px Solid #FFF;
}
#flashbox ul {
Posição: Absoluto;
Direita: 7px;
Inferior: 9px;
Fonte: 9px Tahoma;
}
#flashbox ul li {
exibição: bloco;
flutuar: esquerda;
Largura: 12px;
Altura: 12px;
altura da linha: 12px;
Margem-direita: 3px;
fronteira: 1px Solid #999;
Antecedentes:#f0f0f0;
Alinhamento de texto: centro;
Cursor: Ponteiro;
}
#flashbox ul li.hover {
cor de borda: vermelho;
Antecedentes:#ffe1e1;
Cor: vermelho;
}
/ *]]> */
</style>
<script type = "text/javascript">
função flashboxctrl (o) {
this.obj = document.getElementById (O);
// Embora esse método privado tenha sido escrito, não é útil por enquanto
função addlistener (ele, eventname, functionbody) {
if (ele.attachevent) {
ele.attachevent ("on"+eventName, functionbody);
} else if (ele.addeventListener) {
ele.addeventListener ("on"+eventName, functionbody, false);
}outro{
retornar falso;
}
}
// inicialização
this.init = function () {
var objimg = this.obj.getElementsByTagName ("img");
var tagLength = objimg.length;
if (tagLength> 0) {
var oul = document.createElement ("ul");
Oul.setAtattribute ("ID", O+"numTag");
for (var i = 0; i <tagLength; i ++) {
var oli = Oul.appendChild (document.createElement ("li"));
if (i == 0) {
oli.setAtattribute ("classe", "Passe"); // Defina o primeiro a destacar durante a inicialização
oli.setAtattribute ("ClassName", "Passe");
}
// Defina o número de etiquetas
oli.appendChild (document.createTextNode ((i+1));
}
this.obj.appendChild (OU);
objimg [0] .style.display = "bloco";
// Defina eventos de tags
var otag = this.obj.getElementsByTagName ("li");
for (var i = 0; i <otag.length; i ++) {
otag [i] .onMouseOver = function () {
for (j = 0; j <otag.length; j ++) {
otag [j] .className = "";
objimg [j] .style.display = "nenhum";
}
this.className = "Hover";
objimg [this.innerhtml-1] .style.display = "bloco";
}
}
}
};
// O método de rolagem automática ainda não foi escrito
this.imgroll = function () {};
// O método init () é carregado automaticamente ao gerar um objeto para inicializar o objeto
this.init ();
}
</script>
<div id = "flashbox">
<img src = "/imagens/m02.jpg"/>
<img src = "/imagens/m03.jpg"/>
<img src = "/imagens/m04.jpg"/>
<img src = "/imagens/m09.jpg"/>
</div>
<script type = "text/javascript">
// gerar um objeto
novo flashboxctrl ("flashbox");
</script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.