1. Utilisez la position d'affichage de la largeur d'image pour lire des images. Technologie: .OffsetWidth, abtn [i] .index = i, setInterval (), oul [0] .style.left =, onclick ()
2. Utilisez des tableaux pour mettre des images dans des carrousels. Technologie: setInterval (). Pas d'onclick ()
Picture Carrousel 12Js.html
La copie de code est la suivante:
<! Doctype html public "- // 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = iso-8859-1" />
<Title> Les images diapentent </Title>
<style type = "text / css">
* {
marge: 0px;
rembourrage: 0px;
}
li {
Style de liste: aucun;
}
img {
bordure: 0;
}
un {
Décoration du texte: aucune;
}
#glisser {
Largeur: 800px;
hauteur: 400px;
Box-shadow: 0px 0px 5px # c1c1c1;
marge: 20px automatique;
Position: relative;
débordement: caché;
}
#slide ul {
Position: absolue;
gauche: 0px;
En haut: 0px;
hauteur: 400px;
Largeur: 11930px;
}
#slide ul li {
Largeur: 800px;
hauteur: 400px;
débordement: caché;
flottant: à gauche;
}
#slide .ico {
Largeur: 800px;
hauteur: 20px;
débordement: caché;
Texte-aligne: Centre;
Position: absolue;
gauche: 0px;
En bas: 10px;
Z-Index: 1;
}
#slide .ico a {
Affichage: bloc en ligne;
Largeur: 10px;
hauteur: 10px;
Contexte: URL (out.png) sans répétition 0px 0px;
marge: 0px 5px;
}
#slide .ico .active {
Contexte: URL (out1.png) sans répétition 0px 0px;
}
#btnleft {
Largeur: 60px;
hauteur: 400px;
gauche: 0px;
En haut: 0px;
Contexte: url () sans répétition 0px 0px;
Position: absolue;
Z-Index: 2;
}
#btnleft: Hover {
Contexte: url () sans répétition 0px 0px;
}
#btnRight {
Largeur: 60px;
hauteur: 400px;
Droite: 0px;
En haut: 0px;
Contexte: url () sans répétition 0px 0px;
Position: absolue;
Z-Index: 2;
}
#btnRight: Hover {
Contexte: url () sans répétition 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;
// alerte (base de base);
oul [0] .Style.Width = BaseWidth * ali.length + "px";
var inow = 0;
pour (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .onclick = function () {
//alert(this.index);
//alelert(oul_0.style.left);
déplacer (this.index);
//[email protected] Lord.Classname = "Active";
}
}
obtnleft.onclick = function () {
inow ++;
//Document.Title = inow;
déplacer (inow);
}
obtnright.onclick = function () {
inow -;
document.title = inow;
déplacer (inow);
}
var curindex = 0;
var timeInterval = 1000;
setInterval (modifier, timeInterval);
Fonction Change () {
if (curindex == abtn.length) {
curindex = 0;
} autre {
déplacer (curindex);
curindex + = 1;
}
}
Fonction Move (index) {
//Document.Title = index;
if (index> ali.length-1) {
index = 0;
inow = index;
}
if (index <0) {
index = ali.length - 1;
inow = index;
}
pour (var n = 0; n <abtn.length; n ++) {
abtn [n] .classname = "";
}
abtn [index] .classname = "active";
oul [0] .style.left = -Index * BaseWidth + "PX";
// tampon (oul [0], {
// à gauche: -index * BaseWidth
//}, 8)
}
}
</cript>
</ head>
<body>
<div id = "Slide">
<a id = "btnleft" href = "javascript: void (0);" > </a>
<a id = "btnright" href = "javascript: void (0);" > </a>
<! - Lorsque changez l'image suivante: style = "gauche: - (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>
</docy>
</html>
Images play.html
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "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);
fonction changeImg () {
var obj = document.getElementById ("obj");
if (curindex == arr.length-1) {
curindex = 0;
} autre {
curindex + = 1;
}
obj.src = arr [curintex];
}
</cript>
<! - <script linguisse = "javascript">
setInterval (test, 1000);
var array = new Array ();
var index = 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", "image / 10.jpg");
fonction test () {
var myimg = document.getElementById ("imgs");
if (index == array.length-1)
{index = 0; } else {index ++; }
myimg.src = array [index];
}
</cript> ->
</ head>
<body>
<img id = "obj" src = "1.jpg" bordure = 0 />
</docy>
</html>