検索
ホームページウェブフロントエンドH5 チュートリアルhtml5 css3 を使用してスライダー切り替え効果を実現 JavaScript css_html5 チュートリアルのスキルに別れを告げる

さて、前回、できるだけ早くいくつかの記事を埋め合わせると言いましたが、平気で約束を逃してしまいました。記事を投稿してからほぼ1か月が経ちましたが、本当に憂鬱です。最近は基本的に次から次へとプロジェクトが決まっていて、暇なときに適切なテーマが見つからなかったり、テーマが詰まっていると時間が取れなかったりします。 。そこで、私が一定期間悩んできた問題についての知識をまとめ、時間のあるときに一つ一つ深く勉強し、記事にまとめて共有することにしました。

本題に入りますが、スライダーに関しては、これまでは、関連する切り替え効果を実現するために CSS と JS が使用されてきました。 html5 css3 を使った実装について皆さんが議論していると聞きましたが、私自身は実装したことがありません。さて、今回は css3 をいじる時間があります。実際、私も Weibo のメッセージに惹かれ、他の人が達成した素晴らしい結果を見て、自分もやってみたいという衝動に駆られました。
1. レンダリング

以前の js で実現した効果とあまり変わりませんが、全体的な雰囲気は非常にエレガントです。 CSS3 の強みは、非常に少ないコードを記述するだけで比較的複雑な効果を実現できることです。ただし、この例も完璧ではありません。2 つの画像を切り替える場合、中央に画像がある場合、CSS3 アニメーションの実行中にその画像が表示されるため、比較的効果がありません。しかし考えてみてください、これは純粋な css3 によって実現される効果であり、js で実装された複雑な html 構造の変更はここでは見られないため、上記の効果は単純に css3 だけで実現するのは困難です。
2. HTML 構造 >


;
="スライダー">

タイトル1

/pic1.png"/>gt;




タイトル3


説明3

info">

タイトル4
説明4


html5 css3 を使用してスライダー切り替え効果を実現 JavaScript css_html5 チュートリアルのスキルに別れを告げる


/h1>


html5 css3 を使用してスライダー切り替え効果を実現 JavaScript css_html5 チュートリアルのスキルに別れを告げる








>


上記のコードは、入力ラジオ グループを含むメインの HTML 構造です。この例では、これが重要な役割を果たしています (これが非表示にしたくない理由です。本当のヒーローは舞台裏にいるべきではありません)。
下のスライダーには表示する必要のある画像が含まれており、内側の余白を制御することでさまざまな画像を表示できます。

コントロールは、画像の左側と右側にある切り替え矢印です。なぜ 5 つデザインする必要があるのか​​については心配しないでください。念のため言っておきますが、2 つだけで十分です。この例では js を使用してスイッチングを実装します。
最後にアクティブになるのは、画像の下にある小さなクリック ボタンです。クリックすると、閲覧したい画像を直接選​​択して、サムネイル効果をデザインすることもできます。
3. CSS スタイル シート

コードをコピーします
コードは次のとおりです。 🎜>
@charset utf-8;
/* common */
body{background: #ddd;overflow-x: hidden;}
#bd{width: 960px;margin : 100px auto ;max-width: 960px;}
/* module: sliders */
#sliders{
border-radius: 5px;
box-shadow: 1px 1px 4px #666; 🎜>パディング: 1%;
背景: #fff;
}
#overflow{
幅: 100%;
#sliders inner{
width: 500%;
transiton: すべて 1 のリニア;
-webkit-transition: すべて 1 のリニア;
#sliders 記事{
float: left; 🎜>幅 : 20%;
}
#sliders 記事 .info{
不透明度: 0;
カラー: #666; 🎜>フォントファミリー: Arial;
トランジション: 不透明度 0.1 秒イーズアウト;
-webkit-transform: 不透明度 0.1 秒; >}
#sliders 記事 .info h1{
font-size: 22px;
font-weight: 太字
margin: 0 0 5px;
#sliders 記事 . info a{
color: #666;
text-decoration: none;
}
/* モジュール: コントロール */
高さ: 50px;幅: 100 %;
マージントップ: -25%;
#controls label{
幅: 50 ピクセル;
>不透明度: 0.3;
カーソル: ポインタ;
}
#controls label:hover{
不透明度: 1;
}
/* モジュール: アクティブ */
# active{
width: 100%;
margin-top: 23%;
#active label{
display: inline-block; 🎜>幅: 10px;
高さ: 10px;
背景: #bbb;
#777; :hover{
background: #ccc;
}
/* 入力チェック済み変更スタイル */
#slider1:checked ~ #active label:nth-child(1),
#slider2 :checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4 ),
#slider5:checked ~ #active label:nth-child(5){
background: #333;
}
#slider1:checked ~ #controls label:nth-child(5 )、
#slider2:checked ~ #controls label:nth-child(1)、
#slider3:checked ~ #controls label:nth-child(2)、
#slider4:checked ~ #controls label:nth -child(3),
#slider5:checked ~ #controls label:nth-child(4){
表示: ブロック;
フロート: 左;
背景: url(. ./img /prev.png) no-repeat;
margin-left: -70px;
#slider1:checked ~ #controls label:nth-child(2),
#slider2 :checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5 ),
#slider5:checked ~ #controls label:nth-child(1){
表示: ブロック;
フロート: 右;
背景: url(../img/next.png ) no-repeat;
margin-right: -70px;
}
#slider1:checked ~ #sliders 記事:nth-child(1) .info,
#slider2:checked ~ #sliders記事:nth -child(2) .info,
#slider3:checked ~ #sliders 記事:nth-child(3) .info,
#slider4:checked ~ #sliders 記事:nth-child(4) .info,
#slider5:checked ~ #slidersarticle:nth-child(5) .info{
opacity: 1;
transition: すべて 0.6s イーズアウト 1s;トランジション: すべて 0.6 秒イーズアウト 1 秒;
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
マージン左: -100%;
}
#slider3:checked ~ #sliders .inner{
マージン左: -200%;
# slider4:checked ~ #sliders .inner{
margin-left: -300%;
#slider5:checked ~ #sliders .inner{
margin-left: -400%; >}


上記の CSS コードは本当に量が多くて複雑であることは認めますが、非常に素晴らしい効果が得られます。書き終えたとき、CSS3 の巨大な魔法に感銘を受けました。 。 。
ここでのコードの前半は、主にスライダーの構造を設計するために使用され、丸い角や影などの美しいデザインが含まれています。後半は主に、画像の切り替えやコントロール ボタンの切り替え時にダイナミックな効果を実現するためのアニメーション効果です。ただし、最も重要なことは、画像切り替え機能を実際に実現する下部の css3 セレクターの使用です。この例ではセレクターが非常に重要な役割を果たしていると本当に思います。なぜなら、これは私が過去に CSS3 を学習したときに無視していたものだからです。 CSS3 の強みは角丸、影、変形、アニメーションだと常々感じていましたが、このコードは CSS3 においてセレクターがいかに重要であるかを示しています。一部の複雑なロジックでは、これらの CSS3 セレクターを使用すると、想像を絶する効果が得られる場合があります。
4. スライダー実装の原則
上記のコードを初めて読んだとき、あなたも最初は私と同じように、そのようなコードでスライダーの効果が得られるとは信じないはずです。
それでは、実装原理を分析しましょう。
上で、トップのラジオ グループが非常に重要であり、スライダー実装のハブであると述べました。はい、本当にそうです。
スライダーを実装するには、2 種類の切り替えを実現する必要があります。コントロール ボタンをクリックすると同時に画像が切り替わり、画像が切り替わるときにすべてのコントロール ボタンが正しく表示される必要があります。 。
この例では、ラベルをコントロール ボタンとして使用し、article に画像が含まれ、inner が画像のコンテナとして機能します。
簡単に言うと、ラベルと記事を結び付ける方法がなく、ラベルのステータス情報が記事の選択に反映されることは困難です。ラベルの切り替え状況を記録し、それに応じた順番で画像を選択して表示する機能があれば別ですが。
さて、ラジオ グループがスライダーの実装の鍵となる理由がわかりました。はい、ラベルのクリック状態を記録しているようです。
ラベルの for 属性を使用してラベルを対応するラジオに関連付けます。ラベルをクリックすると、対応するラジオがチェックされます。次に、強力な CSS3 セレクターを使用して内側を左に移動し、対応する画像を表示します。もちろん、セレクターには対応する左右の選択ボタンも表示されます。同様に、左右のボタンをクリックすると、以下の5つの選択ボタンの状態も実装されます。
上記の実装原理は、実際には、コントロール ボタンのクリック状態を記録できる限り、セレクターを通じてスライダー効果を実現できます。
radio グループを使用できるだけでなく、a:hover もこのアイデアに従って、a がホバリングしているときに画像を切り替えることができます。もちろん、実装の原理を理解していれば、他にも実装方法はたくさんあります。
5. まとめ
実は CSS3 はとても楽しくて、CSS3 では想像できないような効果がたくさんあります。 CSS3 を書くにはちょっとした賢さが必要だと実感することもあれば、絶妙な実装方法が本当に素晴らしいこともあります。
そうですね、ちょっとした練習として、この例は特に強力なセレクターについて多くのことを学びましたが、これまで無視しすぎていたことが恥ずかしくなってきました。 。 。
不連続な画像の切り替えの問題についてはまだ考慮する必要があります。これを支援するにはいくつかの js を使用する必要があるようです。
わかりました。結果が出たら共有します。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか?H5はHTML5と同じですか?Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか?H5の機能は何ですか?Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1)Webページにグラフィックとアニメーションを描画できる要素。 2)Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3)Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4)互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール