この記事の例は、JSがBaidu Allianceで優れた画像スイッチング効果を達成する方法を示しています。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<Title> JSは、Baidu Allianceで良い画像切り替え効果を実現します</title>
<body>
<スクリプト>
var links = new Array（）;
リンク[1] = "http://www.baidu.com/";
リンク[2] = "//www.vevb.com/";
リンク[3] = "http://www.sohu.com/";
リンク[4] = "http://sc.vevb.com/";
var imgs = new Array（）;
for（var n = 1; n <= 5; n ++）imgs [n] = new Image（）;
imgs [1] .src = "images/m01.jpg";
imgs [2] .src = "images/m02.jpg";
imgs [3] .src = "images/m03.jpg";
imgs [4] .src = "images/m04.jpg";
var tits = new array（）;
おっぱい[1] = "Baidu Search";
おっぱい[2] = "wulin.com";
おっぱい[3] = "Sohu Homepage";
おっぱい[4] = "マテリアルホーム";
var imgwidth = 550; //画像幅
var imgheight = 134; //画像幅
var str = "<style type = 'text/css'>";
str += "#imgnv {display：none; position：absolute; bottom：-1px; right：0; height：16px;}＃imgnv div {float：left; margin-right：1px;}";
str += "#imgnv div.on、＃imgnv div.off {margin-bottom：1px; width：30px; height：15px; line-height：18px！comefict; line-height：15px; font-size：9px;テキストアライグ：センター;センター;カーソル：ポインター：カーソル：ハンド}";
str += "#imgnv div.on {background：＃ce0609; color：#fff; font-weight：bold}";
str += "#imgnv div.off {background：＃323232; color：#fff; text-decoration：none}";
str += "#titnv {margin-top：3px; color：＃000; text-align：center; display：none;}";
str += "</style>";
str += "<div style = 'position：relative'>";
str + = "<div> <a id = 'dlink' href = '" + links [1] + "'ターゲット= '_ blank'> <img id = 'dimg' src = '" + imgs [1]' border = 'width =' " + imgwidth +" 'height =' '' + imgeight + "'filt +" onMouseOver = 'Pause（true）' onmouseout = 'Pause（false）'> </a> </div> ";
//ポイント1を変更します：内側のdivコンテンツをループしての数を増やす
str += "<div id = 'imgnv'> <div id = 'it1' class = 'on' onmouseover = 'imgswitch（1、true）' onmouseout = 'pause（false）'> 1 </div> <div 'class =' off 'onmouseover =' inmgswitch（2、 'puse =' pause = 'pause =' pause class = 'on' onmouseover = 'imgswitch（3、true）' onmouseout = 'pause（fals）'> 3 </div> <div id = 'it4' class = 'off' onmouseover = 'imgswitch（4、true）' onmouseout = 'pause（false）'> 4 </div> </div> ";
str + = "<div id = 'titnv'> <b>" + tits [1] + "</b> </div>";
str += "</div>";
document.write（str）;
var oi = document.getElementById（ "dimg"）;
var pause = false;
var Curid = 1;
var lastid = 1;
var sw = 1;
var Opacity = 100;
var速度= 15;
var delay =（document.all）？ 400：700;
function setalpha（）{
if（document.all）{
if（oi.filters && oi.filters.alpha）oi.filters.alpha.opacity = opacity;
}それ以外{
oi.style.mozopacity =（（ofacity> = 100）？99：不透明） / 100;
}
}
関数imgswitch（id、p）{
if（p）{
一時停止= true;
不透明度= 100;
setalpha（）;
}
oi.src = imgs [id] .src;
document.getElementById（ "dlink"）。href = links [id];
document.getElementById（ "it" + lastId）.className = "off";
document.getElementById（ "it" + id）.classname = "on";
document.getElementById（ "titnv"）。innerhtml = "<b>" + tits [id] + "</b>";
Curid = lastId = id;
}
関数screollimg（）{
if（Pause && ofacity> = 100）return;
if（sw == 0）{
不透明 += 2;
if（不透明>遅延）{Opacity = 100; SW = 1; }
}
if（sw == 1）{
不透明 - = 3;
if（不透明<10）{Opacity = 10; SW = 3; }
}
setalpha（）;
if（sw！= 3）return;
SW = 0;
Curid ++;
//ポイント2：4を変更してください。これも数字です
if（Curid> 4）Curid = 1;
Imgswitch（Curid、False）;
}
関数の一時停止（s）{
Pause = S;
}
function startscroll（）{
SetInterval（Screollimg、Speed）;
}
function checkload（）{
if（imgs [1] .complete == true && imgs [2] .complete == true）{
ClearInterval（checkId）;
SettimeOut（StartScroll、2000）;
}
}
var checkid = setInterval（checkload、10）;
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。