出産前後の痔にはご注意!

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

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

A 回答 (2件)

あまり優れたサンプルとは言えないですね。


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


・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>
    • good
    • 0
この回答へのお礼

tracerさま☆

お返事遅くなってすみません;

丁寧に改訂版まで作って頂きありがとうございましたm(==)m

ちょっと初心者過ぎまして、いろいろ解読しながら当てはめていくのに時間がかかるので、

またお伺いするかもですが、

どうもありがとうございました☆

お礼日時:2014/12/08 16:45

8枚目を表示したらタイマーを止めればいいのでは。


https://sites.google.com/site/jqueryjavascript/s …

また、止めたいわけですから、
if(flg>7){
flg=7; //flgが8を越えたら0に戻る
}
は不要ですよね。
    • good
    • 0
この回答へのお礼

早速ありがとうございました。
すみませ~ん;
初心者なもので、せいぜい、写真の枚数やタイムを変えることくらいしか、応用?がききません(><)
ifからあとはとるとして、
提示頂いた部分はどう組み合わせたらいいのでしょうか(;;)

お礼日時:2014/12/04 14:53

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

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

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

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

QJQueryのスライドショーを停止させたい

サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止(ループさせない)ようにしたいのです。
どこをいじってもうまくいかなく困っています。

お教えいただけないでしょうか?

http://vegas.jaysalvat.com/
(SLIDE SHOWを利用しています。)


よろしくおねがいします。

Aベストアンサー

jquery.vegas.jsの209行目でstep=0;してるので、ここで先頭に戻ってるんじゃないでしょうか?


if ( step >= backgrounds.length || !backgrounds[ step - 1 ] ) {
step = 0; //←ココ!!
}

なので、ここにストップするコードを書いてやればいいかと思います

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q【CSS】floatで左右に並べた

CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、この2つのblockレベル要素は高さが違えば下部が不ぞろいになります。
これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか?
text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

Aベストアンサー

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate05.htm
(私が書いた4つ目の方法は、このサイトのパクリです)

CSSだけで段組を・・・ というのは、ちょっとした事でレイアウトが崩れてしまうという、
難しい問題がありますね。
私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての
解決方法があるのかも知れません。

参考リンク
http://css.uka-p.com/
http://desperadoes.biz/style/dan/index.php
http://msugai.fc2web.com/web/CSS/colup.html

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate0...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Qjqueryのbxsliderをマウスオーバーで停止・マウスアウトで再開したい

bxslider
http://bxslider.com

マウスオーバーしたらスライドが停止。
そして、マウスアウトしたらスライドが再び動くようにしたいです。
停止はするのですが再開してくれません。

bxsliderを動かしているコードはこちらです。
下の方は数秒後に停止するようにコールバックで指定しています。

$(document).ready(function(){
var slide = $('#bxslider01').bxSlider({
auto: true,
pause: 2000,
slideSelector: 'div.bxslider',
speed: 3500,
autoHover:true,
pager:true,
minSlides: 1,
maxSlides: 1,
moveSlides: 5,
slideWidth: '1000',
onSlideAfter: function(){slide.startAuto(); },
onSliderLoad: function(currentIndex){
$( '#bxslider01' ).delay( 10*1000 ).queue( function () {
slide.stopAuto();
});
}
});
});


解決策やコードの訂正箇所など、御教示いただけますと幸いです。

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

bxslider
http://bxslider.com

マウスオーバーしたらスライドが停止。
そして、マウスアウトしたらスライドが再び動くようにしたいです。
停止はするのですが再開してくれません。

bxsliderを動かしているコードはこちらです。
下の方は数秒後に停止するようにコールバックで指定しています。

$(document).ready(function(){
var slide = $('#bxslider01').bxSlider({
auto: true,
pause: 2000,
slideSelector: 'div.bxslider',
speed: 3500,
autoHover:true,
pager:true,
minSlides: 1,
ma...続きを読む

Aベストアンサー

ANo1、2、3です。
補足を見ました。

最初のご質問文のコードとは違うようですね。
補足でご提示のスクリプトでは最後の閉じ括弧が抜けているようですが、コピペのとき抜け落ちたものと解釈しました。

補足のスクリプトを見ただけですが・・・(テストしていません)
> var out = $("#slider li a").mouseout(~~)
> var over = $("#slider li a").mouseover(~~)
は、bxsliderとは別個にautoHoverと同様のイベント処理を設定しているように思いますが、optionでもautoHoverが設定されているので、処理がダブっていることになりませんか?
(同様の処理を2回行うだけで、実害はないかもしれませんが…)


>ただ、10秒経過し止まってから、マウスアウトすると動いてしまいます。
一方で、10秒後にautoを停止しても、上記の(個別設定の)イベント処理は活きていますので、outで設定されている通り、マウスアウトが発生すればautoStartするものと思います。
これによって、ご質問の状況となっているのではないでしょうか。

ANo2の最後にも書きましたように、別個に設定しているイベント処理を止めたければ、これを停止(削除)する必要があります。
とはいうものの、ご提示のスクリプトの場合は、そもそもイベント処理を設定する必要がないように思えますが…?


回答の最初の時点では、bxsliderをまったく知りませんでしたが、だいぶ勉強させていただきました。(笑)

ANo1、2、3です。
補足を見ました。

最初のご質問文のコードとは違うようですね。
補足でご提示のスクリプトでは最後の閉じ括弧が抜けているようですが、コピペのとき抜け落ちたものと解釈しました。

補足のスクリプトを見ただけですが・・・(テストしていません)
> var out = $("#slider li a").mouseout(~~)
> var over = $("#slider li a").mouseover(~~)
は、bxsliderとは別個にautoHoverと同様のイベント処理を設定しているように思いますが、optionでもautoHoverが設定されているので...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q独自ドメインからどこのレンタルサーバーを使用してるか調べる方法

独自ドメイン(www.好きな名前.com等)からどこのレンタルサーバーを使用してるか調べる方法を教えて下さい。
またレンタルサーバー専用会社なのか大手プロバイダのレンタルサービスを使用してるかを調べる方法をできれば具体的に教えて下さい。

Aベストアンサー

.comや.orgなどならば http://www.whois.sc/
でドメイン名を入れて検索すると、
その結果表示の中の IP location という項目に
会社名がでます。

.jpならば コマンドプロンプトで"ping サーバ名"で
IPアドレスを取得、次に http://www.nic.ad.jp/
下部左の部分にそのIPアドレスを入れて検索すると
会社名がでます。

でドメインを入れて

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QPSファイルを見る方法

ダウンロードしたファイルがpsファイルだったのですが、
見ることが出来なく、困っています。
過去の質問も検索してみたのですが、いまいちよく分からなくて・・・

質問なのですが、
(1)psファイルはどのようにして見ればいいのでしょうか?
(2)やはり何らかのソフトを入れないと見れないものなのでしょうか?
(3)できればPDFなどに変換できる方法はないでしょうか?
どれか1つでもいいので、ご存知の方、よろしくお願いします!

Aベストアンサー

1.Acrobat Distillerに喰わせれば、pdfになります。
2.PostScriptプリンタに流し込めば、印刷物になります。
3.MacOSXのプレビューで開いても、pdfになります。
4.GhostScriptを導入してGSViewでモニタ上で見ることも出来ます。

Windowsでは4番くらいかな。

QWEBページがパソコンで表示されている通りに印刷ができない…

題の通りです。
前回も、『WEBページが長すぎるのか印刷ができません…』というのを質問しましたが、今回もわからないことがあったので質問します。

印刷したいWEBページは、前と同じです。
印刷したいホームページです。↓
http://blog.mbc.co.jp/suzume/2007/12/index.html

どうしても、パソコンで表示(印刷ブレビューではない)された通りに印刷してくれません。

パソコンは、『Windows Me』と『Windows XP』を使っています。(2つともノートパソコンです。)
プリンターは、『EPSON PM-G700』を使っています。
何が原因で、どうすれば直るんですか?

Aベストアンサー

少しレイアウトが変わりますが、大体印刷できる方法を見つけました。

1. ブラウザは Firefox を使ってください。
2. 目的のウェブページを、自分の PC に保存してください。

保存したページを、Firefox で表示させてから印刷してください。
これでかなり希望通りになるはずです。

Internet Explorer 6.0 ではうまくいきませんでした。
Firefox を使っているときでも、直接アクセスした状態ではうまくいきませんでした。

あえて自分の PC に保存することで、印刷を狂わせる設定が無効になってしまう、というわけです。


人気Q&Aランキング