Este artículo describe el método de JS para realizar el efecto de conmutación de la imagen de deslizamiento flash. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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" lang = "zh-cn">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<meta http-oquiv = "content-language" content = "gb2312" />
<meta name = "autor" content = "Rainoxu" />
<title> JS simula el efecto de conmutación de la imagen de diapositivas flash </title>
</ablo>
<Body>
<style type = "text/css">
/ * <! [Cdata [ */
Ul, Li {
relleno: 0;
margen: 0;
Estilo de lista: Ninguno;
}
#flashbox {
Ancho: 326px;
Altura: 246px;
Border: 1px Solid #EEE;
Posición: relativo;
}
#flashbox img {
/*No se muestren inicialmente*/
Pantalla: ninguno;
/* Use bordes para lograr espacios vacíos, porque el margen y el padear a veces pueden causar algunos problemas*/
borde: 3px sólido #fff;
}
#flashbox ul {
Posición: Absoluto;
Derecha: 7px;
Abajo: 9px;
fuente: 9px Tahoma;
}
#flashbox ul li {
Pantalla: bloque;
flotante: izquierda;
Ancho: 12px;
Altura: 12px;
Línea de altura: 12px;
margen-derecha: 3px;
borde: 1px Solid #999;
Antecedentes:#F0F0F0;
Text-Align: Center;
cursor: puntero;
}
#flashbox ul li.Hover {
color frontera: rojo;
Antecedentes:#ffe1e1;
Color: rojo;
}
/ *]]> */
</style>
<script type = "text/javaScript">
función flashboxctrl (o) {
this.obj = document.getElementById (o);
// Aunque este método privado ha sido escrito, aún no es útil
function addListener (ELE, EventName, FunctionBody) {
if (ele.attachevent) {
ele.attachevent ("on"+eventname, functionBody);
} else if (ele.addeventListener) {
ele.addeventListener ("en"+eventname, functionBody, false);
}demás{
devolver falso;
}
}
// Inicialización
this.init = function () {
var objimg = this.obj.getElementsBytagName ("img");
var tagLength = objimg.length;
if (tagLength> 0) {
var oul = document.createElement ("ul");
oUl.SetAttribute ("id", o+"numtag");
para (var i = 0; i <tagLength; i ++) {
var oli = oUl.appendChild (document.createElement ("li"));
if (i == 0) {
oli.setAttribute ("clase", "hover"); // Establecer el primero en resaltar durante la inicialización
oli.setAttribute ("classname", "hover");
}
// Establecer el número de etiquetas
oli.appendChild (document.createTextNode ((i+1)));
}
this.obj.appendChild (OUl);
objimg [0] .style.display = "bloque";
// establecer eventos de etiqueta
var otag = this.obj.getElementsBytagName ("li");
para (var i = 0; i <otag.length; i ++) {
otag [i] .onmouseover = function () {
para (j = 0; j <otag.length; j ++) {
OTAG [j] .classname = "";
objimg [j] .style.display = "ninguno";
}
this.classname = "hover";
objimg [this.innerhtml-1] .style.display = "bloque";
}
}
}
};
// El método de desplazamiento automático aún no se ha escrito
this.imgroll = function () {};
// El método init () se carga automáticamente al generar un objeto para inicializar el objeto
this.init ();
}
</script>
<div id = "flashbox">
<img src = "/images/m02.jpg"/>
<img src = "/images/m03.jpg"/>
<img src = "/images/m04.jpg"/>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javaScript">
// Generar un objeto
nuevo FlashboxCtrl ("Flashbox");
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.