実践的なjsフォーカスマップ切り替え効果、構造と動作の分離_javascriptスキル

フォーカス画像の切り替え効果は、おそらくフロントエンドではよく知られているものであり、仕事でよく使用される方法の 1 つを以下に説明します。
現在のデジタル ナビゲーションをディスプレイと同期する方法。写真の？
ここには、ピクチャ切り替えエリアとデジタル ナビゲーション エリアの 2 つのエリアがあり、それぞれ play(value) と setBg(value) の 2 つのループ関数に対応します。
ピクチャ ループが 2 番目のピクチャに切り替わるとき、このとき、デジタル ナビゲーションの現在の状態も 2 番目の位置に変更され、同期効果が得られます。ここで重要なのは、同じパラメータ値をそれらに渡すことであり、このタスクは関数 Mea(value) に渡されます。
ループ内で最後の画像が表示された後、最初の画像に戻る必要がありますが、auto() はパラメータ n を判断するだけです。
このとき、関数 setInterval() が実行されます。 auto() は一定時間ごとに、パラメータ n に対応して常に増分変化します。n は関数 Mea(n) に渡されます。
マウスがスライドすると、画像が切り替わります。デジタル ナビゲーション エリアは現在の状態のままです。マウス (n) 機能を忘れないでください。これはその功績です。
このようにして、複数の機能兄弟が分業し、協力してそれぞれの役割を果たしました。
1.html

コードをコピー コードは次のとおりです。

画像 1
写真 2
写真 3 #">写真 4

• 1


• 2


• 4
  

; >
コードをコピー


コードは次のとおりです:

.jfocus{width:300px;height:300px;border:#ccc 1px Solid;background -color:# FFF;}

#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;} #jfocuspic a{表示: なし; 行の高さ: 200 ピクセル; カーソル: ポインター; } jfocusnum li{カーソル:ポインター;高さ:50ピクセル;行の高さ:50ピクセル;色:#999 1ピクセルの背景色:# CCC; float: left; margin:0 5px;} #jfocusnum li.on{color:#f00; border:#900 font-size:14px;} 3.js

コードをコピー


コードは次のとおりです:

function $(id){return document.getElementById(id);}
var n=0;
var Num=$("jfocusnum").getElementsByTagName("li"); 🎜>var imglist=$("jfocuspic").getElementsByTagName("a");
function setBg(value){//数値領域の切り替え、現在の要素にクラス「on」を追加、他の要素のクラスをクリア;
for(var i=0;i}
関数value )//画像領域変換
try//try...catch は、コード内のエラーをテストできます。 try セクションには実行する必要があるコードが含まれ、catch セクションにはエラーが発生したときに実行されるコードが含まれます。
{
with (jfocuspic)//IE にフィルター効果を追加します。
{
filters[0].Apply();//動的効果を開始する前に、それを装備する必要があります (適用) )、Apply イベントを使用してフィルター効果を生成します。
for(i=0;ifilters[0].play();//play() メソッドは動的エフェクトを再生するために使用されます。これより前に、フィルター スタイルは #jfocus_pic スタイル;
}
}
catch(e)
{
for(i=0;i{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";// 現在の画像を表示、非表示他の写真;
}
}
}
function Mouse(n){
for(var i=0;i(function( n ){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//マウス通過後の自動切り替えを停止し、関数 Mea() Pass を与える現在のパラメータ n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
setBg(value);
}
function auto();パラメータ n の増分は、画像の自動回転の鍵となります。
if(n>Num.length-1)n=0; >function setAuto(){autoStart=setInterval("auto()", 2000)}//2000 ミリ秒ごとに auto() 関数が実行され、実行されるたびにパラメーター n が 1 ずつ増加します
setAuto ();// 関数呼び出し


デモコード:

写真 1<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <p>写真 2<meta content="text/html; charset=gb2312"> </p>写真 3<style type="text/css"><!-- .jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;} #jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;margin-bottom:20px;} #jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;} #jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;} #jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;} --></style> <div class="jfocus">写真 4<div id="jfocuspic"> <a href="#" style="display: block;"> </a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> </div>4<ul id="jfocusnum"> <li class="on"> </li> <li> <li> </li> <li>[Ctrl A すべて選択 注: </li>外部 Js を導入する必要がある場合は、更新して実行する必要があります </ul>] <br>動作層は js で構成されています。これを実現するために、ここでの作業は単純なスケルトンを構築するだけです。レンダリングをより美しくしてデザイン要件を満たしたい場合は、CSS の強力な役割を使用する必要があります。 <input onclick="runEx('runcode10313')" type="button" value="运行代码">js はコンパイル後、次回再利用できますが、CSS を記述するときは毎回デザイナーが異なるスタイルを作成する可能性があるため、CSS コードを書き直して実装する必要があります。 css 正確に配置して良好な互換性を維持するだけでなく、最適化を最大限に高めることは、実際には簡単なことではありません。</div>