この記事の例は、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プログラミングに役立つことを願っています。