1. Use la posición de pantalla de ancho de imagen para reproducir imágenes. Tecnología: .OffSetWidth, abtn [i] .index = i, setInterval (), oul [0] .style.left =, onClick ()
2. Use matrices para colocar imágenes en carruseles. Tecnología: setInterval (). No OnClick ()
Picture Carousel 12js.html
La copia del código es la siguiente:
<! Doctype html público "-// w3c // dtd xhtml 1.0 Strict // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = ISO-8859-1" />
<title> Images Slide </title>
<style type = "text/css">
* {
margen: 0px;
relleno: 0px;
}
li {
Estilo de lista: Ninguno;
}
img {
borde: 0;
}
a {
Decoración de texto: ninguna;
}
#deslizar {
Ancho: 800px;
Altura: 400px;
Shadow de caja: 0px 0px 5px #C1C1C1;
Margen: 20px Auto;
Posición: relativo;
desbordamiento: oculto;
}
#Slide UL {
Posición: Absoluto;
Izquierda: 0px;
arriba: 0px;
Altura: 400px;
Ancho: 11930px;
}
#Slide Ul Li {
Ancho: 800px;
Altura: 400px;
desbordamiento: oculto;
flotante: izquierda;
}
#Slide .ICO {
Ancho: 800px;
Altura: 20px;
desbordamiento: oculto;
Text-Align: Center;
Posición: Absoluto;
Izquierda: 0px;
Abajo: 10px;
índice z: 1;
}
#slide .ico a {
Pantalla: bloque en línea;
Ancho: 10px;
Altura: 10px;
Antecedentes: url (out.png) No-repeat 0px 0px;
margen: 0px 5px;
}
#Slide .ico .Active {
Antecedentes: url (out1.png) No-repeat 0px 0px;
}
#btnleft {
Ancho: 60px;
Altura: 400px;
Izquierda: 0px;
arriba: 0px;
Antecedentes: URL () No-Repeat 0px 0px;
Posición: Absoluto;
índice z: 2;
}
#Btnleft: Hover {
Antecedentes: URL () No-Repeat 0px 0px;
}
#btnright {
Ancho: 60px;
Altura: 400px;
Derecha: 0px;
arriba: 0px;
Antecedentes: URL () No-Repeat 0px 0px;
Posición: Absoluto;
índice z: 2;
}
#Btnright: Hover {
Antecedentes: URL () No-Repeat 0px 0px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var oico = document.getElementById ("ICO");
var abtn = oico.getElementsByTagName ("A");
var oslide = document.getElementById ("Slide");
var oUl = Oslide.getElementsBytagName ("UL");
var ali = oUl [0] .getElementsBytagName ("li");
var obtnleft = document.getElementById ("btnleft");
var obtnright = document.getElementById ("btnright");
var basewidth = ali [0] .OffSetWidth;
// alerta (basewidth);
Oul [0] .Style.Width = BaseWidth * Ali.length + "Px";
var inow = 0;
para (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .onclick = function () {
//alert(THIS.Index);
//alert(oulchefont>.style.left);
mover (this.index);
//aicofico.indexfont>.classname = "activo";
}
}
OBTNLEFT.OnClick = function () {
inow ++;
//document.title = inow;
moverse (inow);
}
OBTNRING.OnClick = function () {
inow -;
document.title = inow;
moverse (inow);
}
var curindex = 0;
VAR TimeInterval = 1000;
setInterval (Change, TimeInterval);
cambio de función () {
if (curindex == abtn.length) {
curindex = 0;
} demás {
mover (curindex);
curindex += 1;
}
}
Función Move (índice) {
//document.title = index;
if (index> ali.length-1) {
índice = 0;
inow = índice;
}
if (index <0) {
índice = ali.length - 1;
inow = índice;
}
para (var n = 0; n <abtn.length; n ++) {
abtn [n] .classname = "";
}
abtn [index] .classname = "activo";
Oul [0] .style.left = -index * BaseWidth + "Px";
// buffer (oul [0], {
// izquierda: -dex * basewidth
//}, 8)
}
}
</script>
</ablo>
<Body>
<div id = "diapositiva">
<a id = "btnleft" href = "javaScript: void (0);" > </a>
<a id = "btnright" href = "javaScript: void (0);" > </a>
<!-Cuando cambie la siguiente imagen: style = "izquierda:-(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>
Imágenes reproducen automáticamente.html
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Images </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);
función cambieMG () {
var obj = document.getElementById ("obj");
if (curindex == arr.length-1) {
curindex = 0;
} demás {
curindex += 1;
}
obj.src = arr [curindex];
}
</script>
<!- <script language = "javaScript">
setInterval (prueba, 1000);
var array = new array ();
índice var = 0;
var array = new array ("imagen/1.jpg", "imagen/2.jpg", "imagen/3.jpg", "imagen/4.jpg", "imagen/5.jpg", "imagen/6.jpg", "imagen/7.jpg", "imagen/8.jpg", "Imagen/9.jpg", "Imagen/10. 10.
función test () {
var myimg = document.getElementById ("imgs");
if (index == array.length-1)
{index = 0; } else {index ++; }
myimg.src = array [index];
}
</script> ->
</ablo>
<Body>
<img id = "obj" src = "1.jpg" borde = 0 />
</body>
</html>