В этой статье описывается метод JS+CSS для достижения эффекта переключения слайдов Foded Focus. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! 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 Fade-In Focus Focus Picture Effect </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;
// Кнопка переключения
для (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> = aimg.length && (index = 0);
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/m01.jpg"/> </li>
<li> <img src = "/images/m02.jpg"/> </li>
<li> <img src = "/images/m03.jpg"/> </li>
<li> <img src = "/images/m04.jpg"/> </li>
<li> <img src = "/images/m05.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.