図に示すように、2 つのサイド矢印画像があります。
JDカルーセル効果を実現するための純粋なHTMLとCSS
|
JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CSS を使用して実装されました。
<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8">
<title>ルンボ</title>
<スタイル>
*{
パディング: 0;
マージン: 0;
}
li{
リストスタイル: なし;
}
.lunbo{
マージン: 40px 自動;
高さ: 470ピクセル;
幅: 590ピクセル;
位置: 相対的;
}
.左、.右{
位置: 絶対;
上位: 50%;
上マージン: -18px;
幅: 24px;
高さ: 36px;
}
。左{
左: 0;
}
。右{
右: 0;
}
.lunbo ul{
高さ: 18px;
幅: 151ピクセル;
背景: rgba(255,255,255,.3);
位置: 絶対;
下: 10px;
左: 50%;
左マージン: -76px;
境界線の半径: 10px;
}
.ルンボ・リ{
高さ: 14px;
幅: 14px;
境界線の半径: 50%;
背景色: #fff;
フロート: 左;
マージン: 2px;
}
.lunbo .current{
背景色: #f40;
}
</スタイル>
</head>
<本文>
<div class="lunbo">
<img src="images/lunbo.jpg" alt="">
<div class="left"><img src="images/left.png" alt=""></div>
<!-- リンクを使用してから背景を使用することもできます -->
<div class="right"><img src="images/right.png" alt=""></div>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</本文>
</html>以下の効果が得られました
要約する 上記は、エディターが導入した JD カルーセル効果を実現するための純粋な HTML と CSS です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: JavaScript のアンチシェイクとスロットリングの違いと実装
推薦する
ネイティブ js で呼び出し、適用、バインドを実装する方法
1. 呼び出しを実装するステップ：関数をオブジェクトのプロパティとして設定します。これを関数に割り当...
モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)
3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...
Ubuntu 18.04の下のディレクトリにディスクをマウントします
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...
ORM モデル フレームワークを使用して MySQL データベースを操作する方法
ORM とは何ですか? ORM は Object Relational Mapping の略で、オブ...
JVMシリーズのメモリモデルの詳細な説明
目次1. メモリモデルとランタイムデータ領域2. マインドマップと凡例3. オブジェクトはJVMから...
JavaScriptはパスワードボックスの検証情報を実装します
この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...
C++ を使用して MySQL に接続する方法
C++でMySQLに接続する際の参考情報です。具体的な内容は以下のとおりです。 MySQLCon ク...
JS オブジェクト配列の重複排除のための 3 つの方法の例と比較
目次1. 重複排除前後のデータの比較2. 使い方1. フィルターとマップを使用する2. 削減を使用す...
Baidu デッドリンクファイルを作成する方法
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
MySQL ユーザーのホスト属性を素早く変更する方法
MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...
MySQL の制限ページング最適化ソリューションの実装に関する簡単な説明
MySQL のページングステートメントの使用制限Oracle や MS SqlServer と比較す...
jsを使用してシンプルな虫眼鏡効果を実現します
この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内...
CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...
MySQL 8.0 の降順インデックス
序文インデックスが順序付けられていることは誰もが知っていると思いますが、MySQL の以前のバージョ...
Navicat Premier の MySQL へのリモート接続エラー 10038 の解決方法
MySQL へのリモート接続が失敗する場合は、次の理由が考えられます。 1. 若い男性/女性の方は、...