ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery_jqueryで実装した画像グループ切り替えフォーカス画像プラグイン

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

WBOY
リリース: 2016-05-16 16:22:00
オリジナル
1314 人が閲覧しました

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

実装コード。

HTML コード:

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

 

       


            上一組


       

           
       

   

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 });
});
});
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート