jqueryでスライドショーを作成してるのですが、パスが合わないのか、わからない点があります。ダウンロードしたjqueryのbxslider.css images jquery.jsは現在作成しているテキストをまとめたファイルと同階層にあります。またjqueryは拡張子はいるのですか?以下ソースコードです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script src="js/jquery.js"></script>
<link href="css/jquery.bxslider.css"rel="stylesheet" />
<script type="text/javascript">
jquery(document).ready(function($){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
<ul class="bxslider">
<li><img src="64013dd25a44c8f5a4f7a4817a250cc0_s.jpg"></li>
<li><img src="b8e534d0b4eb1805cd6cce879ef9bb25_s.jpg"></li>
<li><img src="b5499c01c8ce1822d504bfb4317d8bd8_s.jpg"></li>
<li><img src="cd1c7ccec442b51fb3de581e0c0e5cb0_s.jpg"></li>
</ul>
</head>

質問者からの補足コメント

  • 具体的にはimagesフォルダの中にフレームなどがあるので2行目。3行目にimagesを付け足したのですがダメです。

      補足日時:2016/08/30 16:18
  • imagesフォルダの中にフレームなどのファイルがあります。
    <script=" js/images...
    <script="href/css/images...
    としてみましたがダメです。

      補足日時:2016/08/31 05:38

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ANo1です。



すみません、前回はスクリプトをよく見ていませんでした。
スクリプト部分にも動作しない原因となるところがありそうです。

>jquery(document).ready(function($){~~
最初のjqueryはjQueryでないとエラーになります。
(javascriptでは大文字、小文字は区別されます)

また、readyメソッドの引数となる関数が、
>function($){ ~~ }
の形となっていますが、引数$に当たるものが定義されていないので記述的にはおかしいですね。
(まぁ、現状のままでも関数内ではグローバルの$になるようなので、通じるみたいではありますが…)
変数$を指定する必要がなければ、function(){ ~~ } で良いはずです。
noConflictなどを用いて変数$をクローズドに利用したい場合に、function($){ ~~ }(jQuery)などの記法が用いられます。

bxSliderのオプション設定部のオブジェクトリテラルで、リストの最後が「,」で終わっていますが、文法的には正しくありません。
そのままで通るブラウザもありますが、エラーとしてはじくブラウザもあります。


※ 補足のコメントが追加されたようですが、意味が理解できなかったので反応できませんでした。
>具体的にはimagesフォルダの中にフレームなどがあるので2行目。
通常は、フォルダの中にあるのはファイルかフォルダだと思いますが・・・??

>3行目にimagesを付け足したのですがダメです。
何の3行目にimagesを付け足したのでしょうか? そもそもimagesって何のことだろう・・・??
    • good
    • 0

こんにちは



>jqueryのbxslider.css images jquery.jsは現在作成している
>テキストをまとめたファイルと同階層にあります
とのことですので、相対URLはファイル名を記すことで通るはずです。
むしろjs/jquery.jsやcss/jquery.bxslider.cssなどと、1段下の階層を指定しているので対象が読み込めていないものと思われます。

・jQueryをgoogleのものと自サーバのものとダブって読み込もうとしているようですが、どちらか片方で良いです。
・bxsliderを利用するのに、肝心のbxslider.js本体が読み込まれていないようです。
・hrefやsrc属性のパスを正しく通してください。
・<ul>以降のHTMLはhead内ではなく、body内に記述してください。

以上で動作するのではないでしょうか?
    • good
    • 0
この回答へのお礼

お世話になります。回答ありがとうございました。

お礼日時:2016/08/29 09:58

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q無料のスライドショー作成ソフト

写真スライドショーをパソコンで作りたいのですが、何か無料でよいソフトをご存知の方がいらっしゃれば教えて下さい。
ただ写真をスライドさせるだけなら簡単に出来るのですが、それにBGMをつけたいのです。
BGMをつけるには何かソフトを使ってスライドを作らないとできないと思いますので、質問しました。
音楽ファイルはwmvかmp3使用予定です。
よろしくお願いします。

Aベストアンサー

Windowsムービーメーカーというソフトが、XPならデフォルトで
プログラムの中にひっそりと入っています。探してみてください。
(無くてもフリーでインストール可能です。)
動画ソフトなんですが静止画も扱えるので、BGMも入れれますし、
切り替えもかなり種類あるので便利ですよ。

QjQueryでスライドショー作成(無限ループ)

jQueryでスライドショーを作成したいです。

仕様としては、進むボタンと戻るボタンがあって、どちらかを押すと、画像が前または後ろにスライドして変わります。

ここまではできるんですが、以下のような無限にループさせることができません。
・最後まで行ったときに、進むボタンを押すと、最初の画像が右から現れてスライドし、最初に戻る。
・最初の画像のときに戻るボタンを押すと、最後の画像が左から現れてスライドし、現在地が最後の画像になる。

具体的には、下記サイトのような挙動にしたいです。
http://www.slidesjs.com/


このようなスライドショーの無限ループは、どのように考えれば実現できるのか、どなたかご教授いただけないでしょうか?

Aベストアンサー

ちゃんと内容を見ていませんが、ul全体の位置をずらしてスライドさせているのだと思います。

循環して表示できるようになさりたいとのことですが、
現状のままだと、最初と最後の要素を連続させようとすると両方を同時に表示(スライド中の表示)できないので、イニシャライズ時にリストの最後に最初の要素をコピーして追加しておきます。
このようにしておくことで、循環する際に必要な全部の状態をスライド表示することが可能になります。

アニメーション部分を自作している場合は、その処理の中でul要素のオフセット値が範囲内に納まるようにmodをとるようにしておけばあとは気にしなくても良くなります。
ご提示のスクリプトでは、ライブラリを使用してアニメーションなさっているようですので、スタート時の表示要素が最初又はコピーした要素(同じもの)を表示中の場合は、アニメーションを開始する前に、次に移動する方向によって表示するオフセットを切替えるようにしておけばよろしいかと思います。

Q写真のスライドショー作成

デジタル一眼レフカメラで撮影した写真のスライドショーを作成したくて
パソコンに内蔵されていたムービーメーカーからDVDメーカーで初めて作成してました。

出来たスライドショーDVDを家庭用のDVDプレーヤーでテレビで視聴すると画像がものすごく悪くてビックリ・・・
そして残念でした…

色々とネットで調べては見たのですが、パソコンも詳しくないし
スライドショーの作成も初めてで言葉の意味すらわかりません(>_<)

無料ではなくていいので家庭用のプレーヤーで再生できる高画質のスライドショーをとにかく簡単に出来るソフトが知りたいです…

幼稚園の卒園記念にスライドショーを作成して保護者に配布したいので
出来ればBDとDVD、どちらとも作成対応だとありがたいです。

宜しくお願いします…

Aベストアンサー

OSはWindows7ですか?
ムービーメーカーとは『 Windows ムービーメーカー2012 』のことですか?

ムービーメーカー2012で作成した動画をDVDメーカーで処理すると
正しいDVDは作成できません。(映像が左右に圧縮されてしまう。)

Windows DVD メーカー オプションの縦横比16:9を選択したが、
作成されたDVDの縦横比は4:3になります。対応方法を教えてください。
http://answers.microsoft.com/ja-jp/windows/forum/windows_other-pictures/windows-dvd-%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC/9154794e-c77f-4994-854f-44bb3c035817
ここではワイド(16:9)の場合ですが、4:3の場合も同じです。

『 Windows ムービーメーカー2012 』はアンインストールして
『 Windows Live ムービーメーカー2011 』を使っている人もいます。

Windows Live Essentials (旧名: おすすめパック) 2011
http://www.microsoft.com/ja-jp/download/details.aspx?id=29219

あるいはDVDメーカーの代わりに別のソフトを使っている人もいます。

写真のスライドショーを作成するのなら、DVDメーカーだけでもできます。
「Windows DVD メーカー」の使用方法(Windows Vista / Windows 7)
http://faq.epsondirect.co.jp/faq/edc/app/servlet/relatedqa?QID=010699
DVD-RWディスクを持っていれば試してください。
ムービーメーカーを使う場合より少し映像はきれいです。
少なくと家電の普通のDVDプレーヤーで再生するのならば私は十分です。
(だいたい7Mbpsから8.5MbpsのDVDを作成できます。)
「このディスクを消去する」という操作をすれば、何回でも試せます。
- - - - - - - - - - -
写真だけを配布したらどうですか?

OSはWindows7ですか?
ムービーメーカーとは『 Windows ムービーメーカー2012 』のことですか?

ムービーメーカー2012で作成した動画をDVDメーカーで処理すると
正しいDVDは作成できません。(映像が左右に圧縮されてしまう。)

Windows DVD メーカー オプションの縦横比16:9を選択したが、
作成されたDVDの縦横比は4:3になります。対応方法を教えてください。
http://answers.microsoft.com/ja-jp/windows/forum/windows_other-pictures/windows-dvd-%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC/9154794e-c77...続きを読む

QjQueryスライドショーの設定

http://slidesjs.com/
Slides, A Slideshow Plugin for jQuery

ここのjqueryを使って、左右の矢印(← →)をクリックすると
div要素が順番に入れ替わっていくというものを導入しました。

そこで、例えばdivが3つあったとして、
1が表示されているときに→を押すと、当然2に行きますが
3が表示されているときに→を押すと、スクロール自体は右にスクロールしているのに
1が表示されてループしてしまいます。

そこで、3が表示されているときは、→をクリックしても1に行かない、
そもそも→はクリックできず、←しかクリックできない状態にしたいのです。
矢印は消えなくていいです。
うまくストップさせることはできないでしょうか

Aベストアンサー

こんにちは。

矢印を消すタイプであれば比較的簡単に実装できました。
下記ディレクトリにslides.jquery.jsがありますので参考にしてみてください。

動作設定にautoRepeatを追加しました。
これをfalseで指定すると今回の改造した動作になります。
完全なテストはしていないのでバグがあったら申し訳ございません。

こんな感じで指定します。
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 1000,
pause: 2500,
hoverPause: true,
// 指定しないとtrueで指定したのと同じ
autoRepeat: false
});
});


==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7376425/

Q富士通ノートパソコンでのスライドショー作成について

@映像館で作成したフォトストーリーにBGMをつけた場合曲がちょうどで終わりません。
二回繰り返して途中で終了するくらいの長さですが、スライドショーと同時にきれいに曲を終わらせる方法はありますか?

スライドショーが終わったとき曲がブチっと切れます。
曲の終わりを音のレベルをすぅ~~っと消えるようにできますか?

スライドショーの作成ソフトは富士通パソコン内の物は@映像館だけですか?
Windowsフォトギャラリーというのも写真からスライドショーが始まりますがこちらを使用された方いますか?

どの方法が簡単で曲の挿入や終りがきれいに設定できますか?

よろしくお願いします

Aベストアンサー

今晩は。 初めまして。 拝見しました。私も富士通のVista ノートを使用して居ます。
一昨年からPCに保存して居た昔からの写真や、膨大な量のビデオをDVD化しました。

>スライドショーと同時にきれいに曲を終わらせる方法はありますか?A=有りますが曲の終わりを合わすのは一般人では無理でしょう。
>スライドショーの作成ソフトは富士通パソコン内の物は@映像館だけですか?
>曲の終わりを音のレベルをすぅ~~っと消えるようにできますか?A=出来ます。

昨年までの写真は全てBGM入りスライドショーにしました。@映画館は初めて知りました・・・・
○Vista標準のDVDメーカー・他にムービーメーカーも有りますが、此れは写真が変わるだけですので止めまし他。
BGMも簡単に入れられる優れ物のDVDメーカー使用で昨年までの物は全てスライドショーにしました。

ご質問を拝見したので此れの終わりの部分を確認して見ました。・・・・>のすぅ~~っと」よりは短いですが=「スゥッ、」位に消えていました。(映像終了時に音楽が「ブツッ」と消えれば、とっくに気付いて居た筈です)改めて良く出来て居るなと思いました。
話が外れますがデジカメはファインピックスで写真は6Mで撮っています。50型のテレビでも確かめましたが、此れでの映像は鮮明でその上「パンとズーム」は迫力が有りました。

尚以下余談ですがDVDメーカー使用手順は、昨日メディア(記録媒体)で「パソコン格納(JPEG)写真データのDVDレコーダーでの再生方法」に回答して居ますので宜しかったらご参考にされて下さい。長くなりました。ペコッ

今晩は。 初めまして。 拝見しました。私も富士通のVista ノートを使用して居ます。
一昨年からPCに保存して居た昔からの写真や、膨大な量のビデオをDVD化しました。

>スライドショーと同時にきれいに曲を終わらせる方法はありますか?A=有りますが曲の終わりを合わすのは一般人では無理でしょう。
>スライドショーの作成ソフトは富士通パソコン内の物は@映像館だけですか?
>曲の終わりを音のレベルをすぅ~~っと消えるようにできますか?A=出来ます。

昨年までの写真は全てBGM入りスライド...続きを読む

Qjqueryスライドショーをストップする方法

お世話になります。
こちらのサイトを参考にスライドショーを作っているのですが、
ループしないで、最後の画像まできたら、ストップする記述を教えて下さい。
どうぞ宜しくお願い致しますm(==)m

http://www.greenwich.co.jp/blog-archives/p/1903


最後の部分
case 7: //flgが7の場合
//7枚目から8枚目に切り替え
$("#img7").fadeOut(1500);
$("#img8").fadeIn(700);
break;
}

flg++;
if(flg>7){
flg=7; //flgが8を越えたら0に戻る
}

Aベストアンサー

あまり優れたサンプルとは言えないですね。
時間があったので少し書き換えてみましたがどうでしょう。
簡単に書きましたが、サンプルと比較して以下の利点があります。


・htmlの各img要素にidを付与する必要がない。
・画像の枚数によってJavaScriptを編集する必要がない。
・サンプルより少しだけ高速に動作
・JavaScriptの記述がシンプル
・リピート再生するかどうかを変数で設定可能


<script type="text/javascript">
$(function(){
//画像リスト
var $img = $("img","#stage");
//カウンター初期値
var no = 0;
//カウンター最大値
var maxNo = $img.length - 1;
//画像切替間隔(ミリ秒で指定)
var interval = 3500;
//フェードイン・アウトの処理時間(ミリ秒で指定)
var fadetime = 2000;
//リピート再生するかどうか(true or false)
var repeatFlg = false;
//実行部
var timer = setInterval(function(){
if(no != maxNo){
$img.eq(no).fadeOut(fadetime);
$img.eq(no+1).fadeIn(fadetime);
no++;
}else{
if(repeatFlg){
$img.eq(no).fadeOut(fadetime);
$img.eq(0).fadeIn(fadetime);
no = 0;
}else{
clearInterval(timer);
}
}
},interval);
});
</script>

あまり優れたサンプルとは言えないですね。
時間があったので少し書き換えてみましたがどうでしょう。
簡単に書きましたが、サンプルと比較して以下の利点があります。


・htmlの各img要素にidを付与する必要がない。
・画像の枚数によってJavaScriptを編集する必要がない。
・サンプルより少しだけ高速に動作
・JavaScriptの記述がシンプル
・リピート再生するかどうかを変数で設定可能


<script type="text/javascript">
$(function(){
//画像リスト
var $img = $("img","#stage");
...続きを読む

Qフォルダ別にDVDのスライドショーを作成するソフト

フォルダ別にDVDのスライドショーを作成するソフトを探しています。家庭用のDVDプレイヤで再生できるスライドショーを作成したいのです。Win7のDVDメーカーは,フォルダに分けて作成することができません。写真は,フォルダ別で再生できればと思っています。フリー,市販は問いません。おすすめのソフトがあれば教えて下さい。

Aベストアンサー

DVDメーカーはDVDを作るときに使い、スライドショーはムービーメーカーで作ると良いです。
フォルダと言っていますが、スライドショーA、スライドショーBと複数のスライドショーを作り、それをDVDメーカーでDVDに焼きます。

Qjqueryのスライドショー。htmlに画像1枚で

jquery-1.5.1.min.jsを使ってjpg画像を
ランダムにスライドショーさせるプログラムで、
下記ポイントを満たしたプログラムへ変えたいです。

・scriptが機能しない場合には画像がちゃんと表示される
・html上にスライドショーに使う画像を並べない(下記コード参考=【画像多いバージョン】)
・修正するコードは【画像1枚バージョン】

よろしくお願いします。


【画像1枚バージョン】
<script type="text/javascript">
$(function(){
 var elm = $(".fadein");
 elm.children("img").hide();

 (function(){
  var img = elm.children("img:hidden");
  elm.children("img:not(hidden)").fadeOut(1000);
  $(img.get(Math.floor(Math.random() * img.length))).fadeIn(500);
  var id = setTimeout(arguments.callee, 5000);  
 })();
});
</script>

<div class="fadein">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>



【画像多いバージョン】
<script type="text/javascript">
imgLength = 20;
firstInt = 1;
imgChangeSpeed = 5000;
imgExtension = ".jpg";
imgDirectory = "img/";

randomInt = firstInt + 1;

$(function(){
var t = setInterval(loadImg, imgChangeSpeed);
function loadImg(){
$("#gallery").children("img").animate({'opacity':'0'}, 0)
$("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000);

if(randomInt < imgLength){
randomInt = parseInt(randomInt) + 1;
}
else{
randomInt = 1;
}
}
});
</script>

<div id="gallery">
<img src="img/1.jpg" />
</div>

jquery-1.5.1.min.jsを使ってjpg画像を
ランダムにスライドショーさせるプログラムで、
下記ポイントを満たしたプログラムへ変えたいです。

・scriptが機能しない場合には画像がちゃんと表示される
・html上にスライドショーに使う画像を並べない(下記コード参考=【画像多いバージョン】)
・修正するコードは【画像1枚バージョン】

よろしくお願いします。


【画像1枚バージョン】
<script type="text/javascript">
$(function(){
 var elm = $(".fadein");
 elm.children("img").hide();

 (function(){...続きを読む

Aベストアンサー

記述したいマークアップと、その上で行ないたい処理や条件等を明確にして質問しないと、なかなか思う通りのものは入手できないかも。


http://oshiete.goo.ne.jp/qa/6623078.html でご質問に提示なさっているような回答をしたのは、HTMLとスクリプトとで画像のurlをダブって持っているたからで、HTMLに記述したくないのであれば、q6623078のご質問文のスクリプトのようにスクリプト内で定義しておけばよろしいかと。
さらには、今回のご質問のように規則性のある連番での画像名に限定できるのならば、スクリプトで定義しなくてもスクリプトに生成させることが可能です。ご提示の『【画像多いバージョン】』はその方法をとっています。
(HTML内に記述しても、CSSでdisplay:noneで非表示にするという方法もありますが…)

ご提示の【画像多いバージョン】では、変数randomIntがランダムと名がついているものの1ずつ順番に増やしていくようになっているので、そこの部分をランダムにしてあげればよろしいかと思われます。
ランダムな数字を取得する方法は、q6623078のご質問文に提示なさっている方法とその回答に記した方法も同じですので、それを利用すれば良いのではないでしょうか。

記述したいマークアップと、その上で行ないたい処理や条件等を明確にして質問しないと、なかなか思う通りのものは入手できないかも。


http://oshiete.goo.ne.jp/qa/6623078.html でご質問に提示なさっているような回答をしたのは、HTMLとスクリプトとで画像のurlをダブって持っているたからで、HTMLに記述したくないのであれば、q6623078のご質問文のスクリプトのようにスクリプト内で定義しておけばよろしいかと。
さらには、今回のご質問のように規則性のある連番での画像名に限定できるのならば、スクリプト...続きを読む

Qスライドショーを作成したい

結婚式に使うスライドショーを作成しようかと思っています。

Premiere11elementsというのがパソコンに入っていて、スライドショーサンプルのようなものが最初から
入っていたのですが、いろんなバリエーションから選べればなあと思っています。

Premiere以外でスライドショーが作成できるソフトなどありませんでしょうか?

もしご存じの方や作ったことがある方、有償でもいいのであれば教えていただきたいです。
よろしくお願いします。

Aベストアンサー

Windows Live ムービー メーカーでも、DVD メーカーでも、できますよ。

QjQueryスライドショーについて

jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを
参考にしようとしています。皆様のお知恵をお貸しいただければ
幸いです。

http://jsdo.it/alicex/45Jv

実際に配置して、ブラウザチェックを行ったのですが、

(1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて
戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走
して、勝手に動いてしまいます。

(2)また、サムネイル上でカーソルを高速で通過させると、
させた分だけ記憶してメインイメージが変化してしまいます。

(1)のバグを無くしたいのと、(2)は、今カーソルを合わせている
サムネイルに対応したメインイメージにすぐ変化して欲しいです。

jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。

$(function() {
var thumb = $("#thumbnail");
var main = $("#main");

$("li:first-child",thumb).addClass("on").children("img").hide();
$("li:not(:first-child)",main).hide();

slider();

$("li",thumb).hover(function() {
$("li",thumb).removeClass("on").children("img").show();
$(this).addClass("on").children("img").hide();

num = $(this).index() + 1;
mainSelector = $("li:nth-child(" + num + ")",main);
mainSelector.fadeIn();
$("li",main).not(mainSelector).fadeOut();
});

});

function slider() {
$("#thumbnail li img").show();
$("#thumbnail li.on img").hide();

c = $("#thumbnail li.on").index() + 1;
c2 = $("#thumbnail li.on").index() + 2;
mainSelector = $("#main li:nth-child(" + c + ")");
$(mainSelector).fadeIn();
$("#main li").not($(mainSelector)).fadeOut();
$("#thumbnail li").removeClass("on");

if (c2 == 6) {
$("#thumbnail li:nth-child(1)").addClass("on");
}else{
$("#thumbnail li:nth-child(" + c2 + ")").addClass("on");
}

timerID = setTimeout('slider()',3000);
}

本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。

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

jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを
参考にしようとしています。皆様のお知恵をお貸しいただければ
幸いです。

http://jsdo.it/alicex/45Jv

実際に配置して、ブラウザチェックを行ったのですが、

(1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて
戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走
して、勝手に動いてしまいます。

(2)また、サムネイル上でカーソルを高速で通過させると、
させた分だけ記憶してメインイメ...続きを読む

Aベストアンサー

内容はよく見ていませんが…

(1)は暴走しているのではなく、sliderの中でsetTimeoutで30秒ごとに再処理するようにしていることによるもので、その通りに実行されているだけではないのですか?

(2)については、確か、jQueryはアニメーションのキューを蓄積するようになっていたかとおもいますので、都度アニメーションを打ちきって、キューが溜まらないようにしてあげれば良さそうに思います。


内容を確認していませんし、未検証です。


人気Q&Aランキング