jQuery_jqueryで実装した画像グループ切り替えフォーカス画像プラグイン

これはjQueryベースの画像切り替えフォーカスマッププラグインです。このjQueryフォーカスマッププラグインの特徴は、画像をグループで切り替えることができることです。つまり、複数の画像を一度に切り替えることができます。他のフォーカス マップ プラグインを使用すると、スペースが増えることでより多くの画像をユーザーに表示できるため、コストを節約でき、非常に実用的です。

実装コード。

HTML コード:

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

 

       

            上一組下一組

       

           

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

           

       

   

js代码：

复制代码代码如下:

$(関数() {
var $number = Math.ceil($('.scroll ul li').length / 4) //スクロールする画面の数を取得します
var margin = 10 //画像の間隔を設定します
var $w = $('.scroll li').width() margin; // 画面イメージの幅
var $width = $w * $number * 2 // ul 幅を設定します
var pre = $('.device .pre');
var next = $('.device .next');
If ($number == 1) { pre.hide(); }
$('.scroll ul').width($width);
var num = 0;
関数 autoscroll() {
番号 ;
If ($number == 1) { return false }
If (num == $number) {
num = 0;
}
var distance = -2 * $w * num;
$('.scroll ul').stop().animate({ left: distance });
}
varscrollChange = setInterval(autoscroll, 8000);
//マウスをホバーし、スクロールを一時停止します
$(".scroll ul,.pre,.next").mouseover(function () {
$('.scroll ul').stop()
間隔をクリア (スクロールチェンジ)
});
// マウスは遠ざかり、ローリングは継続します
$('.scroll ul,.pre,.next').mouseout(function () {
scrollChange = setInterval(autoscroll, 8000);
});
//次のグループ
next.click(function () {
番号 ;
If (num >= $number) { num = 0 }
var leftdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: leftdis });
});
//前のグループ
pre.click(function () {
num--;
If (num var rightdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: rightdis });
});
});