この記事では、フラッシュスライド画像の切り替え効果を実現するJSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<Meta http-equiv = "content-language" content = "gb2312" />
<Meta name = "Author" content = "rainoxu" />
<Title> JSは、フラッシュスライド画像の切り替え効果をシミュレートします</title>
</head>
<body>
<style type = "text/css">
/ * <！[cdata [ */
ul、li {
パディング：0;
マージン：0;
リストスタイル：なし;
}
#flashbox {
幅：326px;
高さ：246px;
国境：1px solid #eee;
位置：相対;
}
#flashboxIMG {
/*最初に表示しない*/
表示：なし;
/*マージンやパディングがいくつかのトラブルを引き起こす可能性があるため、境界線を使用して空のスペースを達成します*/
ボーダー：3px solid #fff;
}
#flashboxul {
位置：絶対;
右：7px;
下：9px;
フォント：9px Tahoma;
}
#flashbox ul li {
表示：ブロック;
フロート：左;
幅：12px;
高さ：12px;
Line-Height：12px;
マージン右：3px;
国境：1pxソリッド＃999;
背景：＃f0f0f0;
テキストアライグ：センター;
カーソル：ポインター;
}
#flashbox ul li.hover {
ボーダーカラー：赤;
背景：＃ffe1e1;
色：赤;
}
/ *]]> */
</style>
<script type = "text/javascript">
関数flashboxctrl（o）{
this.obj = document.getElementById（o）;
//このプライベート方法は書かれていますが、まだ役に立ちません
関数addListener（ele、eventname、functionbody）{
if（ele.attachevent）{
ELE.ATTACHEVENT（ "on"+eventname、functionbody）;
} else if（ele.addeventlistener）{
ELE.ADDEVENTLISTENER（ "on"+eventname、functionbody、false）;
}それ以外{
falseを返します。
}
}
//初期化
this.init = function（）{
var objimg = this.obj.getelementsbytagname（ "img"）;
var taglength = objimg.length;
if（taglength> 0）{
var oul = document.createelement（ "ul"）;
oul.setattribute（ "id"、o+"numtag"）;
for（var i = 0; i <taglength; i ++）{
var oli = oul.appendChild（document.createElement（ "li"））;
if（i == 0）{
oli.setattribute（ "class"、 "Hover"）; //初期化中にハイライトするように最初のものを設定します
oli.setattribute（ "className"、 "Hover"）;
}
//ラベルの数を設定します
oli.appendChild（document.createTextNode（（i+1）））;
}
this.obj.appendChild（oul）;
objimg [0] .style.display = "block";
//タグイベントを設定します
var otag = this.obj.getelementsbytagname（ "li"）;
for（var i = 0; i <otag.length; i ++）{
otag [i] .onmouseover = function（）{
for（j = 0; j <otag.length; j ++）{
otag [j] .classname = "";
objimg [j] .style.display = "none";
}
this.classname = "Hover";
objimg [this.innerhtml-1] .style.display = "block";
}
}
}
};
//自動スクロール方法はまだ記述されていません
this.imgroll = function（）{};
// init（）メソッドは、オブジェクトを生成してオブジェクトを初期化するときに自動的に読み込まれます
this.init（）;
}
</script>
<div id = "flashbox">
<img src = "/images/m02.jpg"/>
<img src = "/yages/m03.jpg"/>
<img src = "/images/m04.jpg"/>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javascript">
//オブジェクトを生成します
new FlashBoxCtrl（ "Flashbox"）;
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。