この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 html <div class="all" id="box"> <div class="screen"> <ul> <li><img src="images/01.jpg" 幅="500" 高さ="200" /></li> <li><img src="images/02.jpg" 幅="500" 高さ="200" /></li> <li><img src="images/03.jpg" 幅="500" 高さ="200" /></li> <li><img src="images/04.jpg" 幅="500" 高さ="200" /></li> <li><img src="images/05.jpg" 幅="500" 高さ="200" /></li> </ul> <オル> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div> CS * { パディング: 0; マージン: 0; リストスタイル: なし; 境界線: 0; } 。全て { 幅: 500ピクセル; 高さ: 200px; パディング: 7px; 境界線: 1px 実線 #ccc; マージン: 100px 自動; 位置: 相対的; } .スクリーン{ 幅: 500ピクセル; 高さ: 200px; オーバーフロー: 非表示; 位置: 相対的; } .screen li { 幅: 500ピクセル; 高さ: 200px; オーバーフロー: 非表示; フロート: 左; } .screen ul { 位置: 絶対; 左: 0; 上: 0px; 幅: 2500ピクセル; } .all ol { 位置: 絶対; 右: 10px; 下: 10px; 行の高さ: 20px; テキスト配置: 中央; } .all ol li { フロート: 左; 幅: 20px; 高さ: 20px; 背景: #fff; 境界線: 1px 実線 #ccc; 左マージン: 10px; カーソル: ポインタ; } .all ol li.current { 背景: 黄色; } #arr { 表示: なし; } #arr スパン { 幅: 40px; 高さ: 40px; 位置: 絶対; 左: 5px; 上位: 50%; 上マージン: -20px; 背景: #000; カーソル: ポインタ; 行の高さ: 40px; テキスト配置: 中央; フォントの太さ: 太字; フォントファミリ: '太字'; フォントサイズ: 30px; 色: #fff; 不透明度: 0.3; 境界線: 1px 実線 #fff; } #arr #right { 右: 5px; 左: 自動; } JSコード $(関数() { var インデックス = 0; //マウスが入る $('#box').mouseenter(function(){ $('#arr').表示(); }) //マウスを$('#box')から出します。mouseleave(function(){ $('#arr').hide(); }) $('#right').click(function(){ if(index == $('.screen>ul>li').length-1){ //最後のもの index = 0; }それ以外 { インデックス++; } $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); //以下のページ番号はハイライトに対応します $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) $('#left').click(function(){ if(index == 0){ //最初のインデックス = $('.screen>ul>li').length-1; }それ以外 { 索引 - ; } $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); //以下のページ番号はハイライトに対応します $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) //ページ番号をクリックするとカルーセル画像が再生されます$('.screen>ol>li').click(function(){ インデックス = $(this).index() $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) }); 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker で Springboot プロジェクトを実行する実装
>>: XHTML 入門チュートリアル: テーブルタグの応用
Vue のツリー表示については、プロジェクトが使用されています: エフェクト ダイアグラムがツリー...
この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...
テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...
目次負荷分散負荷分散分類1. DNS 負荷分散2. IP負荷分散3. リンク層の負荷分散4. ハイブ...
この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...
目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...
このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...
目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...
遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...
1. ファイアウォールの設定を変更し、対応するポートを開きますLinux システムのファイアウォール...
Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...
WEB開発は主に2つのインタラクション(B/Sデータ)から構成されますブラウザ: 1html、css...
環境の準備操作を開始する前に、hadoop バージョンがインストールされていることを確認してください...
ReactとはReact は、効率的で高速なユーザー インターフェイスを構築するためのシンプルな J...
目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....