В этой статье описывается метод автоматического изменения направления переключения JS+CSS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! 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> JS+CSS автоматически изменяет направление переключения эффекта переключения слайда изображения </title>
<style>
тело, div, ul, li {маржа: 0; накладка: 0;}
ul {list-style-type: none;}
Body {founale:#000; Text-Align: Center; Font: 12px/20px arial;}
#box {позиция: относительная; ширина: 322px; высота: 172px; фон: #ffff; Border-Radius: 5px; граница: 8px solid #ffff; margin: 10px Auto;}
#box .list {позиция: относительная; ширина: 320px; высота: 240px; переполнение: скрыта; граница: 1px solid #ccc;}
#box .list li {position: Absolute; Top: 0; слева: 0; ширина: 320px; высота: 240px; непрозрачность: 0; фильтр: альфа (непрозрачность = 0);}
#box .list li.current {непрозрачность: 1; фильтр: альфа (непрозрачность = 100);}
#box .count {position: Absolute; справа: 0; внизу: 5px;}
#box .count li {color: #ffff; float: слева;
#box .count li.current {color: #fff; непрозрачность: 1; фильтр: альфа (непрозрачность = 100); font-weight: 700; фон:#f60;}
#tmp {ширина: 100px; высота: 100px; фон: красный; позиция: абсолют;}
</style>
<script type = "text/javascript">
window.onload = function ()
{
var obox = document.getElementbyId ("box");
var aul = document.getElementsbytagname ("ul");
var aimg = aul [0] .getelementsbytagname ("li");
var anum = aul [1] .getelementsbytagname ("li");
var timer = play = null;
var i = index = 0;
var border = true;
// Кнопка переключения
для (i = 0; i <anum.length; i ++)
{
anum [i] .index = i;
anum [i] .onmouseover = function ()
{
show (this.index)
}
}
// мышь пробирается и закрывает таймер
obox.onmouseover = function ()
{
ClearInterval (игра)
};
// мышь лишает и начинает автоматическое воспроизведение
obox.onmouseout = function ()
{
Autoplay ()
};
// Функция автопроизводства
функция AutoPlay ()
{
play = setInterval (function () {
// Судья приказ о воспроизведении
граница ? index ++: index--;
// оригинальный заказ
index> = aimg.length && (index = aimg.length - 2, border = false);
// обратный порядок
index <= 0 && (index = 0, border = true);
// вызов функции
Show (index)
}, 2000);
}
AutoPlay (); // Применение
Функция шоу (а)
{
index = a;
var alpha = 0;
for (i = 0; i <anum.length; i ++) anum [i] .classname = "";
anum [index] .classname = "current";
ClearInterval (таймер);
для (i = 0; i <aimg.length; i ++)
{
AIMG [i] .style.Opacity = 0;
AIMG [i] .style.filter = "alpha (opacity = 0)";
}
timer = setInterval (function () {
альфа += 2;
альфа> 100 && (alpha = 100);
AIMG [index] .style.opacity = alpha / 100;
AIMG [index] .style.filter = "alpha (opacity =" + alpha + ")";
alpha == 100 && clearinterval (таймер)
}, 20);
}
};
</script>
</head>
<тело>
<div id = "box">
<ul>
<li> <img src = "/images/m06.jpg"/> </li>
<li> <img src = "/images/m07.jpg"/> </li>
<li> <img src = "/images/m08.jpg"/> </li>
<li> <img src = "/images/m09.jpg"/> </li>
<li> <img src = "/images/m10.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.