この記事では、FADEDフォーカス画像スライドスイッチング効果を実現するためのJS+CSSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<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 {background：＃000; text-align：center; font：12px/20px arial;}
#box {position：relative; width：322px; height：172px; background：#ffff; border-radius：5px; border：8px solid #ffff; margin：10px auto;}
#box .list {position：relative; width：320px; height：240px; overflow：hidden; border：1px solid #ccc;}
#box .list li {position：absolute; top：0; left：0; width：320px; height：240px; ofacity：0; filter：alpha（ofacity = 0）;}
#box .list li.current {Opacity：1; Filter：Alpha（Opacity = 100）;}
＃box .count {position：absolute; right：0; bottom：5px;}
＃box .count li {color：#ffff; float：left; width：20px; height：20px; cursor：pointer; margin-right：5px; overflow：hidden; background：＃f90; ofacity：0.7; filter：alpha（opacity = 70）; border-radius：20px;}
#box .count li.current {color：#fff; ofacity：1; filter：alpha（ofacity = 100）; font-weight：700; background：＃f60;}
#tmp {width：100px; height：100px; background：red; position：absolute;}
</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;
//トグルボタン
for（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関数
function autoplay（）
{
play = setInterval（function（）{
インデックス++;
index> = aimg.length &&（index = 0）;
show（index）;
}、2000）;
}
Autoplay（）; //アプリケーション画像スイッチングフェード効果
機能ショー（a）
{
index = a;
var alpha = 0;
for（i = 0; i <anum.length; i ++）anum [i] .classname = "";
anum [index] .classname = "current";
ClearInterval（タイマー）;
for（i = 0; i <aimg.length; i ++）
{
aimg [i] .style.opacity = 0;
aimg [i] .style.filter = "alpha（ofacity = 0）";
}
Timer = setInterval（function（）{
alpha += 2;
alpha> 100 &&（alpha = 100）;
aimg [index] .style.opacity = alpha / 100;
aimg [index] .style.filter = "alpha（ofacity =" + alpha + "）";
alpha == 100 && clearinterval（タイマー）
}、20）;
}
};
</script>
</head>
<body>
<div id = "box">
<ul>
<li> <img src = "/yages/m01.jpg"/> </li>
<li> <img src = "/migase/m02.jpg"/> </li>
<li> <img src = "/yages/m03.jpg"/> </li>
<li> <img src = "/migase/m04.jpg"/> </li>
<li> <img src = "/yages/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プログラミングに役立つことを願っています。