Este artigo descreve o método de implementar o efeito de comutação de imagem de foco da imitação de js tudou rede com miniaturas. 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Foco com o efeito de troca de imitação de imitação de batata com miniaturas </ititle>
<style type = "text/css">
/ * Redefinir estilo */
* {margem: 0; preenchimento: 0; Break Word: Break-All; }
corpo {background: #fff; Cor:#333; Fonte: 12px/1.6em Helvetica, Arial, Sans-Serif; }
H1, H2, H3, H4, H5, H6 {Size da fonte: 1em; }
a {cor:#039; Decoração de texto: Nenhum; }
A: Hover {Decoração de texto: sublinhado; }
ul, li {estilo de lista: nenhum; }
Fieldset, IMG {Border: Nenhum; }
Em, forte, cite, th {estilo de fonte: normal; peso-fonte: normal; }
/ * Focus_change Style */
#focus_change {position: relativo; Largura: 450px; Altura: 295px; estouro: oculto; margem: 20px 0 1px 60px; }
#focus_change_list {posição: absoluto; Largura: 1800px; Altura: 295px; }
#focus_change_list li {float: esquerda; }
#focus_change_list li img {width: 450px; Altura: 295px; }
.focus_change_opacity {posição: absoluto; Largura: 450px; Altura: 70px; TOP: 225px; Esquerda: 0; Antecedentes:#000; filtro: alfa (opacidade = 50); -Moz-Opacity: 0,5; Opacidade: 0,5; }
#focus_change_btn {posição: absoluto; Largura: 450px; Altura: 65px; TOP: 225px; Esquerda: 0; }
#focus_change_btn ul {preenchimento-left: 5px; }
#focus_change_btn li {display: inline; flutuar: esquerda; margem: 0 15px; Top-top: 12px; }
#focus_change_btn li img {width: 76px; Altura: 50px; fronteira: 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">
função $ (id) {return document.getElementById (id); }
função movelement (elementId, final_x, final_y, interval) {
if (! document.getElementById) retorna false;
if (! document.getElementById (elementId)) retorna false;
var elem = document.getElementById (ElementId);
if (elem.moVement) {
ClearTimeout (elem.movidement);
}
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) {
retornar true;
}
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 repent = "moveElement ('"+elementId+"'," Final_x+","+final_y+","+intervalo+")";
elem.moVement = setTimeout (repetição, intervalo);
}
function classNormal () {
var focusBtnList = $ ('focus_change_btn'). getElementsByTagName ('li');
for (var i = 0; i <focusbtnlist.length; i ++) {
focoBtnList [i] .className = '';
}
}
função focuschange () {
var focusBtnList = $ ('focus_change_btn'). getElementsByTagName ('li');
focusbtnList [0] .onMouseOver = function () {
moveElement ('focus_change_list', 0,0,5);
ClassNormal ()
focoBtnList [0] .className = 'Current'
}
focusbtnList [1] .onMouseOver = function () {
moveElement ('focus_change_list',-450,0,5);
ClassNormal ()
focoBtnList [1] .className = 'Current'
}
focusbtnList [2] .onMouseOver = function () {
moveElement ('focus_change_list',-900,0,5);
ClassNormal ()
focoBtnList [2] .className = 'Current'
}
focusbtnList [3] .onMouseOver = function () {
moveElement ('focus_change_list',-1350,0,5);
ClassNormal ()
focoBtnList [3] .className = 'Current'
}
}
setInterval ('AutoFocusChange ()', 5000);
var ATUOKEY = FALSE;
função autofocuschange () {
$ ('focus_change').
$ ('foco_change'). onMouseOut = function () {atuokey = false}
se (atuokey) retornar;
var focusBtnList = $ ('focus_change_btn'). getElementsByTagName ('li');
for (var i = 0; i <focusbtnlist.length; i ++) {
if (focusbtnList [i] .className == 'Current') {
var currentnum = i;
}
}
if (currentnum == 0) {
moveElement ('focus_change_list',-450,0,5);
ClassNormal ()
focoBtnList [1] .className = 'Current'
}
if (currentnum == 1) {
moveElement ('focus_change_list',-900,0,5);
ClassNormal ()
focoBtnList [2] .className = 'Current'
}
if (currentnum == 2) {
moveElement ('focus_change_list',-1350,0,5);
ClassNormal ()
focoBtnList [3] .className = 'Current'
}
if (currentnum == 3) {
moveElement ('focus_change_list', 0,0,5);
ClassNormal ()
focoBtnList [0] .className = 'Current'
}
}
window.onload = function () {
focuschange ();
}
</script>
</head>
<Body>
<div id = "focus_change">
<div id = "foco_change_list" style = "top: 0; esquerda: 0;">
<ul>
<li> <a href = "// www.vevb.com/"><img src ="/imagens/m03.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/imagens/m04.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/imagens/m09.jpg "/> </a> </li>
<li> <a href = "// www.vevb.com/"><img src ="/imagens/m10.jpg "/> </a> </li>
</ul>
</div>
<div> </div>
<div id = "foco_change_btn">
<ul>
<li> <a href = "#"> <img src = "/imagens/s3.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/imagens/s4.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/imagens/s9.jpg"/> </a> </li>
<li> <a href = "#"> <img src = "/imagens/s10.jpg"/> </a> </li>
</ul>
</div>
</div> <!-foco_change end->
<div style = "altura: 20px; fundo: #eee;"> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.