1. Verwenden Sie die Bildbreite Anzeigeposition, um Bilder abzuspielen. Technologie: .Offsetwidth, abtn [i] .Index = i, setInterval (), OUL [0] .style.left =, onclick ()
2. Verwenden Sie Arrays, um Bilder in Karussells zu setzen. Technologie: setInterval (). Nein Onclick ()
Bild Karussell 12Js.html
Die Codekopie lautet wie folgt:
<! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = iso-8859-1" />
<title> Bilder Folie </title>
<style type = "text/css">
* {{
Rand: 0px;
Polsterung: 0px;
}
li {
Listenstil: Keine;
}
img {
Grenze: 0;
}
A {
Textdekoration: Keine;
}
#gleiten {
Breite: 800px;
Höhe: 400px;
Box-Shadow: 0PX 0PX 5PX #C1C1C1;
Rand: 20px Auto;
Position: Relativ;
Überlauf: versteckt;
}
#slide ul {
Position: absolut;
links: 0px;
Oben: 0px;
Höhe: 400px;
Breite: 11930px;
}
#slide ul li {
Breite: 800px;
Höhe: 400px;
Überlauf: versteckt;
float: links;
}
#slide .ico {
Breite: 800px;
Höhe: 20px;
Überlauf: versteckt;
Text-Align: Mitte;
Position: absolut;
links: 0px;
unten: 10px;
Z-Index: 1;
}
#slide .ico a {
Anzeige: Inline-Block;
Breite: 10px;
Höhe: 10px;
Hintergrund: URL (OUT.PNG) NO-Repeat 0px 0px;
Rand: 0px 5px;
}
#slide .ico .Active {
Hintergrund: URL (out1.png) No-Repeat 0px 0px;
}
#BTNLEFT {
Breite: 60px;
Höhe: 400px;
links: 0px;
Oben: 0px;
Hintergrund: URL () No-Repeat 0px 0px;
Position: absolut;
Z-Index: 2;
}
#BTNLEFT: Hover {
Hintergrund: URL () No-Repeat 0px 0px;
}
#btnright {
Breite: 60px;
Höhe: 400px;
Rechts: 0px;
Oben: 0px;
Hintergrund: URL () No-Repeat 0px 0px;
Position: absolut;
Z-Index: 2;
}
#BTNRIGHT: Hover {
Hintergrund: 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;
// alarm (Basisbreite);
OUL [0] .Style.Width = Basewidth * ali.Length + "px";
var Inow = 0;
für (var i = 0; i <abtn.length; i ++) {
Abtn [i] .Index = i;
Abtn [i] .onclick = function () {
//alert(this.index);
//alert(oul -0..Style.Left);
Bewegung (this.index);
//aico Appan .Index weibliche. ClassName = "Active";
}
}
obtnleft.onclick = function () {
Inow ++;
//document.title = Inow;
bewegen (Inow);
}
obtnright.onclick = function () {
Inow -;
document.title = Inow;
bewegen (Inow);
}
var curindex = 0;
var timeInterval = 1000;
setInterval (Änderung, Zeitinterval);
function change () {
if (curindex == abtn.length) {
curindex = 0;
} anders {
bewegen (curindex);
Curindex += 1;
}
}
Funktion move (index) {
//document.title = index;
if (index> ali.length-1) {
Index = 0;
Inow = index;
}
if (index <0) {
index = ali.length - 1;
Inow = index;
}
für (var n = 0; n <abtn.length; n ++) {
Abtn [n] .ClassName = "";
}
ABTN [INDEX] .CLASSNAME = "Active";
OUL [0] .Style.Left = -Idex * Basewidth + "PX";
// Buffer (OUL [0], {
// links: -index * Basebreite
//}, 8)
}
}
</script>
</head>
<body>
<div id = "Slide">
<a id = "btnleft" href = "javaScript: void (0);" > </a>
<a id = "btnright" href = "JavaScript: void (0);" > </a>
<!-Wenn Sie das nächste Bild ändern: style = "links:-(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>
Bilder spielen automatisch.html
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Bilder </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);
Funktion changeImg () {
var obj = document.getElementById ("obj");
if (curindex == arr.length-1) {
curindex = 0;
} anders {
Curindex += 1;
}
obj.src = arr [curindex];
}
</script>
<!- <script Language = "JavaScript">
setInterval (Test, 1000);
var array = new array ();
var index = 0;
var array = new Array ("Bild/1.JPG", "Bild/2.JPG", "Bild/3.jpg", "Bild/4.JPG", "Image/5.JPG", "Image/6.jpg", "Image/7.JPG", "Image/8.jpg", "Image/9.jpg", "Bild/10.jpg");
Funktionstest () {
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" border = 0 />
</body>
</html>