Este artículo describe el método para implementar el efecto de conmutación de imagen de enfoque de la red de imitación JS con miniaturas. 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Enfoque de cambio de imagen de la red de papa con miniaturas </title>
<style type = "text/css">
/ * Restablecer estilo */
* {margen: 0; relleno: 0; Descanso de palabras: quiebre; }
cuerpo {fondo: #fff; Color:#333; fuente: 12px/1.6em Helvetica, Arial, Sans-Serif; }
H1, H2, H3, H4, H5, H6 {Font-Size: 1em; }
A {color:#039; Decoración de texto: ninguna; }
A: Hover {Text-Decoration: Underline; }
UL, li {estilo list: ninguno; }
Fieldset, img {border: ninguno; }
em, fuerte, cita, th {estilo fuente: normal; Font-peso: Normal; }
/ * Focus_change Style */
#focus_change {posición: relativo; Ancho: 450px; Altura: 295px; desbordamiento: oculto; margen: 20px 0 1px 60px; }
#focus_change_list {posición: absoluto; Ancho: 1800px; Altura: 295px; }
#focus_change_list li {float: izquierda; }
#focus_change_list li img {ancho: 450px; Altura: 295px; }
.focus_change_opacity {posición: absoluto; Ancho: 450px; Altura: 70px; Arriba: 225px; Izquierda: 0; Antecedentes:#000; Filtro: alfa (opacidad = 50); -Pacilidad de MOZ: 0.5; Opacidad: 0.5; }
#focus_change_btn {posición: absoluto; Ancho: 450px; Altura: 65px; Arriba: 225px; Izquierda: 0; }
#focus_change_btn ul {padding-left: 5px; }
#focus_change_btn li {display: inline; flotante: izquierda; margen: 0 15px; Top-top: 12px; }
#focus_change_btn li img {ancho: 76px; Altura: 50px; Border: 2px Solid #888; }
#focus_change_btn .Current {background: url (/uploadfile/200901/1/6c164133877.gif) no-repeat 37px 8px;}
#focus_change_btn .Current img {border-color: #EEE; }
</style>
<script type = "text/javaScript">
función $ (id) {return document.getElementById (id); }
función MoveLement (ElementId, Final_X, Final_y, Interval) {
if (! document.getElementById) return false;
if (! document.getElementById (elementId)) return false;
var elem = document.getElementById (elementId);
if (elem.movement) {
ClearTimeOut (Elem.Movement);
}
if (! Elem.style.left) {
elem.style.left = "0px";
}
if (! Elem.style.top) {
elem.style.top = "0px";
}
var xPos = parseInt (elem.style.left);
var yPos = parseint (elem.style.top);
if (xpos == final_x && ypos == final_y) {
devolver verdadero;
}
if (xpos <final_x) {
var dist = Math.ceil ((final_x - xpos)/10);
XPOS = XPOS + DIST;
}
if (xPOS> FINAL_X) {
var dist = Math.ceil ((XPOS - Final_x)/10);
XPOS = XPOS - DIST;
}
if (yPOS <FINAL_Y) {
var dist = Math.ceil ((final_y - yPos)/10);
YPOS = YPOS + DIST;
}
if (yPOS> FINAL_Y) {
var dist = Math.Ceil ((YPOS - Final_y)/10);
YPOS = YPOS - DIST;
}
elem.style.left = xPos + "Px";
elem.style.top = yPos + "Px";
var repetir = "MoveLement ('"+ElementId+"',"+final_x+","+final_y+","+intervalo+")";
elem.movement = setTimeOut (repetir, intervalo);
}
función classnormal () {
var focusbtnlist = $ ('focus_change_btn'). getElementsBytagName ('li');
para (var i = 0; i <focusbtnlist.length; i ++) {
focusbtnlist [i] .classname = '';
}
}
función focuschange () {
var focusbtnlist = $ ('focus_change_btn'). getElementsBytagName ('li');
focusbtnlist [0] .onmouseover = function () {
MoveElement ('focus_change_list', 0,0,5);
classnormal ()
focusbtnlist [0] .classname = 'actual'
}
focusbtnlist [1] .onmouseover = function () {
MoveElement ('focus_change_list',-450,0,5);
classnormal ()
focusbtnlist [1] .classname = 'actual'
}
focusbtnlist [2] .onmouseover = function () {
MoveElement ('focus_change_list',-900,0,5);
classnormal ()
focusbtnlist [2] .classname = 'actual'
}
focusbtnlist [3] .onmouseover = function () {
MoveElement ('focus_change_list',-1350,0,5);
classnormal ()
focusbtnlist [3] .classname = 'actual'
}
}
setInterval ('autofocuschange ()', 5000);
var atuokey = false;
function AutoFocusChange () {
$ ('Focus_change'). OnMouseOver = function () {AtUokey = True}
$ ('Focus_change'). OnMouseOut = function () {Atuokey = False}
if (atuokey) regreso;
var focusbtnlist = $ ('focus_change_btn'). getElementsBytagName ('li');
para (var i = 0; i <focusbtnlist.length; i ++) {
if (focusBtnList [i] .classname == 'actual') {
var currentNum = i;
}
}
if (currentNum == 0) {
MoveElement ('focus_change_list',-450,0,5);
classnormal ()
focusbtnlist [1] .classname = 'actual'
}
if (currentNum == 1) {
MoveElement ('focus_change_list',-900,0,5);
classnormal ()
focusbtnlist [2] .classname = 'actual'
}
if (currentNum == 2) {
MoveElement ('focus_change_list',-1350,0,5);
classnormal ()
focusbtnlist [3] .classname = 'actual'
}
if (currentNum == 3) {
MoveElement ('focus_change_list', 0,0,5);
classnormal ()
focusbtnlist [0] .classname = 'actual'
}
}
window.onload = function () {
focuschange ();
}
</script>
</ablo>
<Body>
<div id = "focus_change">
<div id = "focus_change_list" style = "top: 0; izquierda: 0;">
<ul>
<li> <a href = "// www.vevb.com/"><img src ="/images/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/images/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/images/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/images/m10.jpg "/> </a> </li>
</ul>
</div>
<div> </div>
<div id = "focus_change_btn">
<ul>
<li> <a href = "#"> <img src = "/images/s3.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s4.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s9.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/images/s10.jpg"/> </a> </li>
</ul>
</div>
</div> <!-Focus_change End->
<div style = "altura: 20px; fondo: #eee;"> </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.