質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

453閲覧

画像のランダム再生の実装方法

minnietk

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/03/01 07:19

事象

Minute Maidの模写を行っているのですが、Insta画像のランダム再生の箇所で躓いています。
現状、Cycleプラグインを使って画像をランダム再生をさせています。

・質問1. オプションでランダム再生の設定をしているが、ランダムにならない
・質問2. 実際のサイトの様に4エリアでランダムに画像を切り替える方法がわからない

質問2に関しては切り替えるタイミングを各エリアで変えることも考えましたが、
1つのエリアで2回連続で切り替わっていたり、4つのうち必ず1エリアしか切り替わっていなかったりと、
切り替えタイミングだけでは解決できない動きをしていて解決方法がわかりません。

下記にソースコードを記載します。
ランダムではありませんがスライドショーは動いているので、
コードの書き方やJSの読み込み方法は合っていると思います。
また、Cycle以外の方法で実際のサイトの様にランダム再生ができる方法がありましたら教えてください。

Minute Maid ↓
https://www.minutemaid.com/

よろしくお願いいたします。

ソースコード

HTML

1<div class="random"> 2 <img src="insta-img/a.jpg" alt=""> 3 <img src="insta-img/b.jpg" alt=""> 4 <img src="insta-img/c.jpg" alt=""> 5 <img src="insta-img/d.jpg" alt=""> 6 <img src="insta-img/e.jpg" alt=""> 7 <img src="insta-img/f.jpg" alt=""> 8 <img src="insta-img/g.jpg" alt=""> 9 <img src="insta-img/h.jpg" alt=""> 10 <img src="insta-img/i.jpg" alt=""> 11 <img src="insta-img/j.jpg" alt=""> 12</div>

JS

1$(function() { 2 $('.random').cycle({ 3 random: 1, 4 }); 5 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FKM

2019/03/01 10:20

通常設定で画像の再生ができているのでしょうか?
minnietk

2019/03/01 11:32

再生はできていますが、ランダムにはならないという状況です。
guest

回答2

0

投稿2019/03/12 11:44

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

テストしてみたら、普通に動きました。サンプルは、本当は東京から博多の順に駅を並べています。
cycleのランダムサンプル

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <title>サンプルプログラム</title> 7 <script type="text/javascript" src="common/js/jquery-3.3.1.min.js"></script> 8 <script type="text/javascript" src="cycle-3.0.3-a/jquery.cycle.all.js"></script> 9<script> 10$(function() { 11 $('.sample').cycle({ 12 random: 1 13 }); 14}); 15</script> 16 </head> 17 <body> 18<div class="sample"> 19 <img src="pic/tokyo.jpg" width="1200px" alt="" /> 20 <img src="pic/sinyokohama.jpg" width="1200px" alt="" /> 21 <img src="pic/shizuoka.jpg" width="1200px" alt="" /> 22 <img src="pic/hamamatsu.jpg" width="1200px" alt="" /> 23 <img src="pic/nagoya.jpg" width="1200px" alt="" /> 24 <img src="pic/kyoto.jpg" width="1200px" alt="" /> 25 <img src="pic/osaka.jpg" width="1200px" alt="" /> 26 <img src="pic/sinkobe.jpg" width="1200px" alt="" /> 27 <img src="pic/okayama.jpg" width="1200px" alt="" /> 28 <img src="pic/hirosima.jpg"width="1200px" alt="" /> 29 <img src="pic/kokura.jpg" width="1200px" alt="" /> 30 <img src="pic/hakata.jpg" width="1200px" alt="" /> 31</div> 32</body> 33</html>

最初のうちはランダムが発動しなかったですが、何度も繰り返しているうちになぜか動くようになりました。あと、minにすると機能が足りないのか動かなかったです。

セレクタはid、classとも試しましたが特に変化なし。また、スクリプトの記述位置もheadタグ内、コンテンツ内問いませんでした。

投稿2019/03/01 11:03

FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

minnietk

2019/03/01 11:33

ありがとうございます。 もう一度やってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問