スライドに関しての質問です。
7枚ある画像を、順番にスライドしていきたいです。
1枚目から2枚目、2枚目から3枚目…と、それぞれ異なる秒数で動き、
7枚目に達したら、1枚目へ戻り同じものを繰り返す。
というものを作りたいのですが、ひとつずつに動きをつけなければならないでしょうか?
イージングは全てeaseoutelasticを使用したいです。
回答2件
あなたの回答
tips
プレビュー
CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
0グッド
0クリップ
投稿2018/03/16 02:51
スライドに関しての質問です。
7枚ある画像を、順番にスライドしていきたいです。
1枚目から2枚目、2枚目から3枚目…と、それぞれ異なる秒数で動き、
7枚目に達したら、1枚目へ戻り同じものを繰り返す。
というものを作りたいのですが、ひとつずつに動きをつけなければならないでしょうか?
イージングは全てeaseoutelasticを使用したいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
画像の横スライド機能を作る際、
大抵用いる手段としてはこのようなDOMで構成されます。
HTML
1<div class="slideshow" style="overflow: hidden;"> 2 <ui> 3 <li style="display: inline-block;"><img src="image1.jpg"></li> 4 <li style="display: inline-block;"><img src="image2.jpg"></li> 5 <li style="display: inline-block;"><img src="image3.jpg"></li> 6 <li style="display: inline-block;"><img src="image4.jpg"></li> 7 <li style="display: inline-block;"><img src="image5.jpg"></li> 8 <li style="display: inline-block;"><img src="image6.jpg"></li> 9 <li style="display: inline-block;"><img src="image7.jpg"></li> 10 </ui> 11</div>
この時、uiに左上を起点に「縦xxPx、横xxPx移動した」という情報が存在します。
JavaScriptでこのxxPx移動したという情報を読み込んだり、書き換えたりして制御しています。
というものを作りたいのですが、ひとつずつに動きをつけなければならないでしょうか?
上記の理由により違います。
スライドするそのもの。
つまりui要素のスクロール情報さえ制御すればスライド機能は作れます。
ただし、画像1の左に画像7を持ってきて無限ループにしたい等の要望があった場合は、
そのハンドリングは中々に高度かつ大変です。
自作するのではなく、jQueryのプラグインか何かを探したほうが圧倒的に楽で早いと思います。
投稿2018/03/16 03:21
総合スコア21158
0
ベストアンサー
miyabi-sunさんのおっしゃるように何かしらのライブラリを使うのが現実的だと思います。
たとえばメジャーどころの slick(http://kenwheeler.github.io/slick/)を使った場合、
ご希望の動きは下記のようなサンプルで再現可能かと思います。
https://www.6666666.jp/html/20170831/
投稿2018/03/16 09:57
総合スコア85
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/16 11:16