ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_form 特殊効果を使用してスライドショー (360 度のパノラマ画像) を作成する
スライドは、顧客に製品のデモンストレーションを行うときによく使用され、360 度のパノラマ画像効果がユーザーに優れた体験価値をもたらします。ここでは、Robert Pataki による 360 パノラマ スライドショーの実装チュートリアルを紹介します。このチュートリアルでは、js を使用してクールなパノラマ スライドショーを実装します。
このチュートリアルではプラグインは使用しません。もちろん、HTML、CSS、JavaScript を使用して実装します。
それを達成するにはどうすればよいですか?
アニメーション表示効果を実現するために、カルーセルに事前に生成された 360 度画像を使用します。 180枚の画像が含まれています。そのため、ロード時間が長くなる可能性があります。
コードの実装
この効果を iPad と iPhone の両方で実現できるように、CSS コードにメディア クエリを追加します。
1. コードファイル
js、css、および画像ディレクトリを追加します。 css ディレクトリには、reset.css が含まれています。 jsにはjQueryが含まれています。コードファイルは次のとおりです:
2. 新しいプロジェクト
HTML ファイルindex.html を作成します。
では、コンテンツがスケーリングをサポートしないようにモバイル デバイスのビューポートを設定します。 2 つのファイルを追加reset.css とthreesixty.css。カスタム CSS スタイルが含まれています。
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> </body> </html>
3. 読み込み進行状況バー
スライドショーを保持するための
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> <divid="threesixty"> <divid="spinner"> <span>0%</span> </div> <olid="threesixty_images"></ol> </div> </body> </html>
4. インタラクションを追加します
コードの最後に、インタラクションを処理する jQuery と画像スライドショーを処理する threesixity.js を追加します。
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> <divid="threesixty"> <divid="spinner"> <span>0%</span> </div> <olid="threesixty_images"></ol> </div> <scriptsrc="js/heartcode-canvasloader-min.js"></script> <scriptsrc="js/jquery-1.7.min.js"></script> <scriptsrc="js/threesixty.js"></script> </body> </html>
5. スタイル
threesixty.css ファイルを追加します。デフォルトのスタイルを設定するには、reset.css を使用します。まず #threesixty ラッパーを定義します。デフォルトの画像スライドショーは 960x450 です。水平方向と垂直方向の中央揃え。
#threesixty { position:absolute; overflow:hidden; top:50%; left:50%; width:960px; height:540px; margin-left:-480px; margin-top:-270p
上記の内容は、JavaScript を使用してスライドショーを作成する方法に関するものです。気に入っていただければ幸いです。