ホームページ > 記事 > ウェブフロントエンド > jQueryでスライディングLUNを実装する
モバイル デバイスとスライディング カルーセルの人気に伴い、jQuery を使用してスライディング カルーセルを実装することは、フロントエンド開発で避けられないタスクの 1 つになりました。この記事ではjQueryを使ってスライディングカルーセルを実装する方法を紹介しますので、フロントエンド開発の参考になれば幸いです。
1. HTML 構造
まず、基本的な HTML 構造を構築する必要があります。この例では、画像をラップするコンテナと、ナビゲーション ポイントを含むコンテナが必要です。コードは次のとおりです:
<div class="slider"> <ul class="slider-wrapper"> <li class="slider-item"><img src="image1.jpg"></li> <li class="slider-item"><img src="image2.jpg"></li> <li class="slider-item"><img src="image3.jpg"></li> <!-- 更多图片 --> </ul> <ul class="slider-nav"> <li class="slider-nav-item active"></li><!-- 第一个导航点默认选中 --> <li class="slider-nav-item"></li> <li class="slider-nav-item"></li> <!-- 更多导航点 --> </ul> </div>
2. CSS スタイル
次に、カルーセル画像の CSS スタイルを設定する必要があります。まず、画像を含むコンテナの幅と高さを設定し、コンテナのオーバーフロー部分を非表示にする必要があります。コードは次のとおりです。
.slider { position: relative; height: 400px; overflow: hidden; } .slider-wrapper { position: relative; width: 300%; height: 400px; /* 需要与.slider一致 */ left: 0; } .slider-item { position: relative; float: left; width: 33.3333%; height: 400px; /* 需要与.slider一致 */ }
次に、ナビゲーション ポイントの CSS スタイルを設定する必要があります。コードは次のとおりです:
.slider-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1; text-align: center; } .slider-nav-item { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #ccc; border-radius: 50%; cursor: pointer; } .slider-nav-item.active { background-color: #f00; }
3. JavaScript コード
最後に、jQuery を使用してカルーセル チャートを実装する必要があります。まず、現在のカルーセル画像のインデックス (index)、画像を含むコンテナ ($wrapper)、ナビゲーション ポイント コンテナ ($nav)、ナビゲーション ポイント ($navItems)、番号などの変数を定義する必要があります。カルーセル画像の数 (imgCount )。コードは次のとおりです。
var index = 0; var $wrapper = $('.slider-wrapper'); var $nav = $('.slider-nav'); var $navItems = $nav.find('.slider-nav-item'); var imgCount = $wrapper.find('.slider-item').length;
次に、カルーセル画像を自動的に再生する関数を定義する必要があります。この関数の実装方法は、現在のカルーセル画像のインデックスを継続的に更新し、画像を含むコンテナを対応する距離だけ移動させることです。コードは次のとおりです。
function autoplay() { index++; if (index >= imgCount) { index = 0; } $wrapper.animate({ left: '-' + (index * 100) + '%' }, 500); $navItems.eq(index).addClass('active').siblings().removeClass('active'); }
最後に、カルーセルが特定の間隔内で自動的に再生できるようにタイマーを定義する必要があります。コードは次のとおりです。
var intervalId = setInterval(autoplay, 3000);
ユーザーがナビゲーション ポイントをクリックすると、タイマーをキャンセルする必要があり、カルーセル チャートが対応する位置にジャンプします。コードは次のとおりです:
$navItems.on('click', function() { clearInterval(intervalId); index = $(this).index(); $wrapper.animate({ left: '-' + (index * 100) + '%' }, 500); $navItems.eq(index).addClass('active').siblings().removeClass('active'); intervalId = setInterval(autoplay, 3000); });
4. 概要
jQuery を使用してスライディング カルーセル チャートを実装する場合は、次の点に注意する必要があります。 #HTML 構造には、画像とナビゲーション ポイントのすべてのカルーセル コンテナーと、画像とナビゲーション ポイントの HTML 要素が含まれている必要があります。
以上がjQueryでスライディングLUNを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。