1. Use a posição de exibição da largura da imagem para reproduzir imagens. Tecnologia: .offsetWidth, Abtn [i] .Index = i, setInterval (), OU [0] .style.left =, OnClick ()
2. Use matrizes para colocar fotos em carrosséis. Tecnologia: setInterval (). Não OnClick ()
Picture Carousel 12js.html
A cópia do código é a seguinte:
<!
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = iso-8859-1" />
<TITLE> Slide de imagens </title>
<style type = "text/css">
* {
margem: 0px;
preenchimento: 0px;
}
li {
estilo de lista: nenhum;
}
img {
borda: 0;
}
A {
Decoração de texto: Nenhum;
}
#deslizar {
Largura: 800px;
Altura: 400px;
Box-Shadow: 0px 0px 5px #C1C1C1;
margem: 20px automático;
Posição: relativa;
estouro: oculto;
}
#slide ul {
Posição: Absoluto;
Esquerda: 0px;
Top: 0px;
Altura: 400px;
Largura: 11930px;
}
#slide ul li {
Largura: 800px;
Altura: 400px;
estouro: oculto;
flutuar: esquerda;
}
#slide .ico {
Largura: 800px;
Altura: 20px;
estouro: oculto;
Alinhamento de texto: centro;
Posição: Absoluto;
Esquerda: 0px;
Inferior: 10px;
Z-Index: 1;
}
#slide .iCo a {
Exibição: bloco embutido;
Largura: 10px;
Altura: 10px;
Antecedentes: URL (out.png) No-repetir 0px 0px;
margem: 0px 5px;
}
#slide .iCo .Active {
Antecedentes: URL (out1.png) No-repetir 0px 0px;
}
#btnleft {
Largura: 60px;
Altura: 400px;
Esquerda: 0px;
Top: 0px;
Antecedentes: url () sem repetição 0px 0px;
Posição: Absoluto;
Z-Index: 2;
}
#btnleft: hover {
Antecedentes: url () sem repetição 0px 0px;
}
#btnright {
Largura: 60px;
Altura: 400px;
Direita: 0px;
Top: 0px;
Antecedentes: url () sem repetição 0px 0px;
Posição: Absoluto;
Z-Index: 2;
}
#btnright: hover {
Antecedentes: url () sem repetição 0px 0px;
}
</style>
<script type = "text/javascript">
window.onload = function () {
var OICO = document.getElementById ("OIC");
var abtn = Oico.getElementsByTagName ("A");
var oslide = document.getElementById ("slide");
var al = oslide.getElementsByTagName ("ul");
var ali = OU [0] .getElementsByTagName ("li");
var obtNleft = document.getElementById ("btnleft");
var obtNright = document.getElementById ("btnright");
var BaseWidth = Ali [0] .OffSetWidth;
// alerta (largura de base);
OU [0] .Style.Width = BaseWidth * Ali.Length + "PX";
var inow = 0;
for (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .OnClick = function () {
//alert(this.index);
//Alert(oul.0 ].style.left);
mover (this.index);
//aico[this.index ].className = "Active";
}
}
obtnleft.OnClick = function () {
INOW ++;
//document.title = iNow;
mover (não);
}
obtNright.OnClick = function () {
INOW -;
document.title = iNow;
mover (não);
}
var Curindex = 0;
var timeInterval = 1000;
setInterval (alteração, timeInterval);
função alteração () {
if (curindex == abtn.length) {
Curindex = 0;
} outro {
mover (Curindex);
Curindex += 1;
}
}
função move (index) {
//document.title = index;
if (índice> Ali.length-1) {
índice = 0;
iNow = index;
}
if (índice <0) {
índice = Ali.Length - 1;
iNow = index;
}
for (var n = 0; n <abtn.length; n ++) {
abtn [n] .className = "";
}
abtn [index] .className = "ativo";
OU [0] .style.left = -Index * baseWidth + "px";
// buffer (OU [0], {
// Esquerda: -Index * BaseWidth
//}, 8)
}
}
</script>
</head>
<Body>
<div id = "slide">
<a id = "btnleft" href = "javascript: void (0);" > </a>
<a id = "btnright" href = "javascript: void (0);" > </a>
<!-Quando muda a próxima imagem: style = "esquerda:-(n-1)*800px;"->
<ul>
<li> <img src = "1.jpg" /> </li>
<li> <img src = "2.jpg" /> </li>
<li> <img src = "3.jpg" /> </li>
<li> <img src = "4.jpg" /> </li>
<li> <img src = "5.jpg" /> </li>
<li> <img src = "6.jpg" /> </li>
</ul>
<div id = "ico">
<a href = "javascript: void (0);"> </a>
<a href = "javascript: void (0);"> </a>
<a href = "javascript: void (0);"> </a>
<a href = "javascript: void (0);"> </a>
<a href = "javascript: void (0);"> </a>
<a href = "javascript: void (0);"> </a>
</div>
</div>
</body>
</html>
Imagens reproduzem automaticamente.html
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> imagens </title>
<script type = "text/javascript">
var Curindex = 0;
var timeInterval = 1000;
var arr = new Array ();
arr [0] = "1.jpg";
arr [1] = "2.jpg";
arr [2] = "3.jpg";
arr [3] = "4.jpg";
arr [4] = "5.jpg";
arr [5] = "6.jpg";
arr [6] = "7.jpg";
setInterval (ChangeImg, TimeInterval);
função alteração de alteração () {
var obj = document.getElementById ("obj");
if (Curindex == arr.length-1) {
Curindex = 0;
} outro {
Curindex += 1;
}
obj.src = arr [curindex];
}
</script>
<!- <Script Language = "JavaScript">
setInterval (teste, 1000);
var array = new Array ();
var índice = 0;
var Array = new Array ("Image/1.jpg", "Image/2.jpg", "Image/3.jpg", "Image/4.jpg", "Image/5.jpg", "Image/6.jpg", "Image/7.jpg", "Image/8.jpg", "Image/9.jpg"/10.jpg "," Image/8.jpg "," Image/9.jpg "/10.jpg", "Image/8.jpg", "Image/9.Jpg"/10.jpg "," Image/8.jpg "," Image/9.Jpg "/10.jpg", "Image/8.jpg", "Image/9.jpg"/10.jpg "," Image/8.jpg "," Image/9.jpg "/10.jpg", "imagem".
function test () {
var myimg = document.getElementById ("imgs");
if (index == Array.Length-1)
{index = 0; } else {index ++; }
myimg.src = array [index];
}
</script> ->
</head>
<Body>
<img id = "obj" src = "1.jpg" borda = 0 />
</body>
</html>