この記事では、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;
var border = true;
//トグルボタン
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 ++：index--;
//元の注文
index> = aimg.length &&（index = aimg.length -2、border = false）;
//逆順
index <= 0 &&（index = 0、border = true）;
//関数を呼び出します
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 = "/migase/m06.jpg"/> </li>
<li> <img src = "/migase/m07.jpg"/> </li>
<li> <img src = "/migase/m08.jpg"/> </li>
<li> <img src = "/images/m09.jpg"/> </li>
<li> <img src = "/mages/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プログラミングに役立つことを願っています。