1. Используйте позицию отображения ширины изображения, чтобы воспроизводить изображения. Технология: .OFFSETWIDTH, abtn [i] .index = i, setInterval (), oul [0] .style.left =, onclick ()
2. Используйте массивы, чтобы положить картинки в карусели. Технология: setInterval (). Нет onclick ()
Картинка Карусель 12JS.HTML
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = iso-8859-1" />
<Teal> изображения слайд </title>
<стиль типа = "text/css">
* {
поля: 0px;
Заполнение: 0px;
}
li {
Список стиля: нет;
}
img {
граница: 0;
}
a {
Текстовое декорация: нет;
}
#slide {
Ширина: 800px;
Высота: 400px;
Box-Shadow: 0px 0px 5px #c1c1c1;
Маржа: 20px Auto;
позиция: относительно;
переполнение: скрыто;
}
#slide ul {
позиция: абсолютно;
слева: 0px;
Верх: 0px;
Высота: 400px;
Ширина: 11930px;
}
#slide ul li {
Ширина: 800px;
Высота: 400px;
переполнение: скрыто;
Плавание: осталось;
}
#slide .ico {
Ширина: 800px;
Высота: 20px;
переполнение: скрыто;
Текст-альбом: Центр;
позиция: абсолютно;
слева: 0px;
Внизу: 10px;
z-index: 1;
}
#slide .ico a {
дисплей: встроенный блок;
Ширина: 10px;
Высота: 10px;
Фон: url (out.png) без повторного перепонки 0px 0px;
Покрас: 0px 5px;
}
#slide .ico .active {
Фон: URL (out1.png) без повторного перепонки 0px 0px;
}
#btnleft {
Ширина: 60px;
Высота: 400px;
слева: 0px;
Верх: 0px;
Фон: url () no-repeat 0px 0px;
позиция: абсолютно;
Z-Index: 2;
}
#btnleft: Hover {
Фон: url () no-repeat 0px 0px;
}
#btnright {
Ширина: 60px;
Высота: 400px;
Справа: 0px;
Верх: 0px;
Фон: url () no-repeat 0px 0px;
позиция: абсолютно;
Z-Index: 2;
}
#btnright: Hover {
Фон: 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 oTnleft = document.getElementById ("btnleft");
var oTnright = document.getElementById ("btnright");
var basewidth = ali [0] .OffSetWidth;
// предупреждение (Basewidth);
oul [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(Tis.index);
//Alert(oul=n.Style.left);
Перемещение (this.index);
//AICO= THIS.INDEXY.CLASSNAME = "Active";
}
}
oTnleft.onclick = function () {
inow ++;
//document.title = inow;
двигаться (iNow);
}
oTnright.onclick = function () {
iNow -;
document.title = inow;
двигаться (iNow);
}
var curindex = 0;
var TimeInterval = 1000;
SetInterval (изменение, TimeInterval);
function изменение () {
if (curindex == abtn.length) {
curindex = 0;
} еще {
Движение (Curindex);
curindex += 1;
}
}
функция перемещение (index) {
//document.title = index;
if (index> ali.length-1) {
index = 0;
inow = index;
}
if (index <0) {
index = ali.length - 1;
inow = index;
}
for (var n = 0; n <abtn.length; n ++) {
abtn [n] .classname = "";
}
abtn [index] .classname = "active";
oul [0] .style.left = -index * basewidth + "px";
// buffer (oul [0], {
// слева: -index * basewidth
//}, 8)
}
}
</script>
</head>
<тело>
<div id = "слайд">
<a id = "btnleft" href = "javascript: void (0);" > </a>
<a id = "btnright" href = "javascript: void (0);" > </a>
<!-Когда изменение следующее изображение: style = "слева:-(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>
Изображения автоматически воспроизводятся.html
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Teal> 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);
function изменять iimg () {
var obj = document.getElementById ("OBJ");
if (curindex == arr.length-1) {
curindex = 0;
} еще {
curindex += 1;
}
obj.src = arr [curindex];
}
</script>
<!- <script language = "javascript">
setInterval (тест, 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/J.Jpg», «Image/Jpg», «Image/9.jpg», «Image/10.jpg»);
функциональный тест () {
var myimg = document.getElementbyId ("imgs");
if (index == array.length-1)
{index = 0; } else {index ++; }
myimg.src = array [index];
}
</script> ->
</head>
<тело>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>