ウェブフロントエンドhtmlチュートリアルJavascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose
JavaScript は画像カルーセルを実装します: (1) 画像をジャンプさせます!
著者: towaywu
2016-02-16 11:42:53.0
29 ビュー
カテゴリ: HTML/CSS/JAVASCRIPT フロントエンド プログラミング プログラミング言語
画像カルーセル効果は、現在の Web サイトのトップページにはほぼ必須の効果です。そこで、この効果の簡単な実装を 3 つの側面から説明します。
-
画像がジャンプします
-
画像シーケンス制御の実装
-
前後ボタン制御の実装
この記事では、間隔に応じて画像がどのように切り替わるかを見ていきます
まずは構造コードを完成させましょう。詳細な説明は省略します。
コードは次のとおりです。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> * { box-sizing: border-box; } a { text-decoration: none; } ul,ol,li{ list-style: none; margin: 0; padding: 0; } #slider{ width: 800px; height: 300px; overflow: hidden; position: relative; margin: 0 auto; } #slider ul{ width: 2400px; position: relative; } #slider ul:after{ content: " "; width: 0; height: 0; display: block; } #slider ul li{ float: left; width: 800px; height: 300px; overflow: hidden; } #slider ul li img{ width: 100%; } #slider ol{ position: absolute; bottom: 10px; left: 46%; } #slider ol li{ display: inline-block; } #slider ol li a{ display: inline-block; padding:4px 8px; border-radius:15px; background-color: #000; color: #fff; } #slider .prev, #slider .next{ display: inline-block; position: absolute; top: 49%; background-color: #000; opacity: 0.6; color: #fff; padding: 3px; } #slider .prev{ left: 10px; } #slider .next{ right: 10px; } </style></head><body> <div id="slider"> <ul> <li> <img src="/static/imghwm/default1.png" data-src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" class="lazy" / alt="Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose" > </li> <li> <img src="/static/imghwm/default1.png" data-src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" class="lazy" / alt="Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose" > </li> <li> <img src="/static/imghwm/default1.png" data-src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" class="lazy" / alt="Javascript は画像カルーセルを実装します: (1) 画像をジャンプさせます - Wu Tongwei の blog_html/css_WEB-ITnose" > </li> </ul> <ol> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ol> <a href="#">上一张</a> <a href="#">下一张</a> </div></body></html> さて、JS を通じて画像のジャンプを制御しましょう。
まず、画像の位置を見つける必要があります。ここでは ul を介してレイアウトするので、まず UL を見つける必要があります。
次に、画像を 1 つずつ表示します。ウィンドウ モード、つまり #slider モードを使用します。は窓、ulは窓の外の風景、ulは風景を横に並べます
すると、外の風景が窓の大きさに合わせて表示されます。つまり、それぞれの写真がそれぞれの風景として使用されますここでは、画像のサイズをウィンドウと同じサイズに制御します。
次に、JS の表示間隔を制御します。画像を表示するには、JS の setInterval または setTimeout を使用する必要があります。ここでは setInterval( を使用すると便利です。)
ジャンプするたびに、UL の位置の左側を制御して、下の景色が表示されるようにします。 ul は毎回異なる表示が可能で、この左はウィンドウの幅に応じて決定され、最初の左はもちろん -800 * 0、2 番目は -800 * 1、3 番目は -800 * 2...
<script> (function(){ var slider = document.getElementById("slider"); var imgul = slider.getElementsByTagName("ul")[0]; var imglis = imgul.getElementsByTagName("li"); var len = imglis.length; var index = 0; setInterval(function(){ if(index >= len){ index = 0; } imgul.style.left = - (800 * index) + "px"; index++; },2000); })(); </script> JS コードは非常に単純に見えます。ここでは 2 秒間のジャンプ シーケンスを設定し、次の数の後に最初の画像に戻ります。
この記事は、Wu Tongwei のブログ、WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233 に属します。転載する場合は、出典と対応するリンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=202、どなたでも拡散および共有を歓迎します。
タグ: JavaScript チュートリアル。 JavaScript の例
HTML5 カメラおよびビデオ コントロール
データは残りません
towaywu
テクノロジーが好きで起業家としての道を進んでいる負け犬です。一緒にコミュニケーションすることを歓迎します。
プログラマーの WeChat 公開アカウント: ビアンチェンデレン
QQ グループ: 186659233
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？Mar 04, 2025 pm 02:39 PMこの記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PMこの記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; datalist＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:33 PMこの記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:34 PMこの記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; meter＆gt;の目的は何ですか 要素？Mar 21, 2025 pm 12:35 PMこの記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PMこの記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
メモ帳++7.3.1
使いやすく無料のコードエディター
ホットトピック
7360
15162814135352126525121429