Jquery フォーカス マップの例 code_jquery

この記事の例では、Jquery フォーカス マップのサンプル コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。

Web サイトを構築している多くの友人にとって、フォーカス マップは、ほとんどの企業 Web サイトやポータル サイトで使用されているものです。通常、HTML コードを記述するとき、多くの人は時間と労力を節約するために、オンラインで他の人が書いたフォーカス画像用のコードをダウンロードし、それを直接適用することがよくあります。これは私自身もよく行う方法です。フォーカス マップには HTML レイアウト、CSS スタイルのデバッグ、および最も重要な JavaScript ステートメントの記述があるためです。これらは非常に面倒なプロセスです。

今日は例を挙げて説明し、Jquery フォーカス チャートの書き方を段階的に説明します。 Jquery は、js 構文を簡素化する js カプセル化フレームワークであり、多くの有名な Web サイトがこのフレームワークを使用しています。ここで、ほとんどのネチズンが理解できるように構文を簡略化するために、Xingzai は Jquery フレームワークも引用しています。

簡単に言うと、ソース コードと対応するコメントを直接投稿します。具体的なコードは次のとおりです:

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

<頭>






 

 

   

     
• 

     
• 

     
• 

     
• 

   

 

 

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
 
var num=$(".bigpic li").length;//获取焦点图の数
var fwidth=$(".bigpic li").width();//获取每焦点图の宽度
var sec=4000;// 時間切换間隔
 
var btn = '

• 1
';
var btnend = '

';
for(i=2;i'私 '';};
btn = btnend;
if(num == 1){btn = null};
$(".focus").append(btn);// 焦点図の数に基づいて、1 つの図にしか表示されていない場合は、自動的に切替えボタンが追加されます。
 
$(".bigpic").css("width",fwidth*num);// 大きな画像セットの範囲を設定します。つまり、すべての焦点画像の範囲の和です。
 
$(".btn li").bind("mouseover",function(){
  $(this).addClass("on").siblings().removeClass("on");
  var i=$(".btn li").index(this);var marginL=fwidth*i;
  $(".bigpic").animate({"left":-marginL},500);}
);// マウスをマウスの上に置くと、焦点図が対応する位置に移動し、ここをクリックして焦点図をポイント移動することもできます。  
picTimer = setInterval(timeset,sec); //sec 秒を指定した後、timeset 関数を実行します。
関数 timeset(){
  var j = $(".btn li").index($(".on"));// 現在の前焦点図の位置、つまりクラスの順序番号を取得します。
  var timew = fwidth*(j 1);
  if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic")。 animate({"left":0},500);}
            else{$(".btn li").eq(j 1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left": -timew},500);};
                  };
 
$(".focus").mouseover(function(){clearInterval(picTimer);});
$(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}
);//マウスが焦点図を指しているとき、またはスイッチング中であるとき、タイマーはクリアされ、つまり自動スイッチングは実行されず、マウスマークは自動的にスイッチングされます。  
})

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。