Эта небольшая демонстрация в основном использует поле, чтобы исправить длину и ширину для отображения изображения. Поместите изображение в Imagebox и подключите его. Каждый раз, когда вы меняете картинку, левый край атрибута стиля Imagebox можно изменить, чтобы сформировать эффект карусели.
Кода -копия выглядит следующим образом:
<! 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" />
<title> unt назвал документ </title>
<style>
.коробка {
Ширина: 900px;
Высота: 350px;
Маржа: 20px;
переполнение: скрыто;
Поле: 0 Авто;
}
.imagebox {
Ширина: 3600px;
Высота: 350px;
-Вобкит-трансляция: все 1s ext-in-out;
-Моз-трансляция: все 1s легко выйти;
-О-
Переход: все 1s легко выйти;
}
.imagebox img {
Ширина: 900px;
Плавание: осталось;
Высота: 350px;
}
</style>
</head>
<тело>
<div>
<div id = "Imagebox">
<img src = "Изображения/Изображение Нажмите Ротация/Image-53.jpg"/>
<img src = "Images/Image Нажмите Ротация/Image-54.jpg"/>
<img src = "Images/Image Щелкните« Вращение/Image-55.jpg "/>
<img src = "Image/Image Щелкните« Вращение/Image-56.jpg "/>
</div>
</div>
<div>
<input type = "button" value = "Left" OnClick = "Turnleft ()"/>
<input type = "button" value = "right" onclick = "turnlight ()"/>
</div>
<script language = "javascript">
var int = setInterval ("change ()", 3*1000);
var a = document.getElementById ("ImageBox");
var i = 1;
function изменение () {
if (i == 4) {
i = 0;
}
i = i+1;
a.style.marginleft = (1-i)*900+"px";
}
Функция stopchange () {clearInterval (int);}
function startChange () {int = setInterval ("change ()", 2*1000);}
a.onmouseover = function () {clearInterval (int);}
a.onmouseout = function () {int = setInterval ("change ()", 2*1000);}
функция Turnleft () {
stopchange ();
i = i+1;
a.style.marginleft = (1-i)*900+"px";
if (i == 4) {
i = 0;
}
startChange ();
}
function turnlight () {
stopchange ();
if (i> 1) {
a.style.marginleft = (2-i)*900+"px";
i = I-1;
}еще{
a.style.marginleft = -3*900+"px";
i = 4;
}
startChange ();
}
</script>
</body>
</html>