時間で画像が切り替わらず困っています。 -時間で表示画像が切り替わるソース-

PCの時間に合わせて画像を変化させたい。

PCの時間に合わせて画像を変化させたい。「自分時計」のスクリプトをダウンロードして試しています。「美人時計」のように1分ごとに画像が変わります。 http://sky.geocities.jp/minamox/jibun-tokei/ さっそく動かしてみたところ、PCの時刻と連動して画像が変わるのではなく、アクセスした時間に60秒を足して画像を切り替えてるようです。なので、PC の時間と画像が切り替わるタイミングが一致しません。「美人時計」のように一緒にはできないでしょうか？お分かりの方がいらしたらぜひ教えてください。よろしくお願いします。 ▼ソースはこれです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script> function getImageFile(date){ var dir = './'; var ext = 'jpg'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> </head> <body> <div id="clock"></div> </body> </html>

1分毎にHTMLを切り替えるJavaScript

時間帯○時○分で表示切替

下記ソースで　AM9:30分～PM12:00の間　02.htmlを表示それ以外は、01.htmlを表示させたいのですが AM10:00～AM10:29，AM11:00～AM11:29の時間帯は02.htmlを表示するように考えたのですが、01.htmlを表示してしまいします。どこか抜けがありますか？解決する方法はありますでしょうか？ <script type="text/javascript">  </script>

nextの使い方

jQueryを勉強したてです。 http://jonraasch.com/blog/a-simple-jquery-slideshow こちらのスライドショーのソースなのですが、【HTML部分】 <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> 【jQuery部分】 function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); }); となっていますが、activeを差し替えて表示するものをどんどん変えていっているというのはなんとなくわかるのですが、 var $next = $active.next(); で、なぜクラス指定していない次のIMGタグが$nextに読み込まれることになるんでしょうか。 var $active = $('#slideshow IMG'); だったら納得いくものの、 var $active = $('#slideshow IMG.active'); であれば、HTMLでは１行しか該当しているものがないので、nextでは読み込まれないように思うのですが・・・よろしくお願い致します。

JavaScriptに関する簡単な質問です。

JavaScript/jQuery で元画像ファイルのサイズの取得

JavaScript/jQuery で元画像ファイルのサイズの取得次のコードを考えましたが、動作が不確定な点があります。状況と対応方策をお教えください。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var pW; var pH; $(function() { newImg(); alert(pW); alert(pH); }); function newImg() { var newImg = new Image(); newImg.src = 'subf/' + "HighJinks_Ni.jpg"; alert("New Image"); //この行をコメントとすると pW=0,pH=0 となる。　　pW=(newImg.width); pH=(newImg.height); } </script> </head> <body> </body> </html> 　上のコードで画像のwidth とheight の値が得られるのですが、alert("New Image"); の行をコメントとすると、正確な値得られず０となります。　対応の方法をお教えください。

jQueryで画像を表示しようとすると表示しない

textに画像を指定したのですが、そのままタグが表示されてしまい画像が表示されません。色々いじってみたものの表示されなかったりして、どうしたらいいのかわかりません。よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ var nCnt = 1; var nMax = 6; $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ if(nCnt <= nMax) { $("<li/>",{ text : '<img src="images/test.jpg" width="68" height="14">'+items.category+'　'+items.date+'　'+items.content, 'class' : items.category, }).appendTo('#portfolio'); } nCnt++; }); }); }); </script>

firefoxでの画像の表示位置が違う

HP作成時での質問です、どうぞ宜しくお願い致します。トップページにイメージ画像を配置し、それをjqueryというjavascriptでスライドショーさせる(計4枚を5秒ずつで切り換え、最後の画像でストップ)ようにしました。作成後、プレビューするとスライドショーそのものの動作確認は問題ありませんでした。が、ブラウザ上での表示位置に違いが出ました。 IEだと何の問題もありません(画像(1))。が、Firefoxだとその画像が図の位置にあるんです(画像(2))。どちらのブラウザでもスライドショーはします。使用したタグの記述としては以下の通りです。 --------------------------------------------------------- 【head内】その(1) <style type="text/css">  </style> その(2) <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> その(3) <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ $(function() { function slideSwitch() { var $active = $('#slideshow img.active'); var $next = $active.next().length ? $active.next() : null; if ($next !== null) { $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } else clearInterval(intervalID); } var intervalID = setInterval(slideSwitch, 5000); }); </script> --------------------------------------------------------- 【body内(の画像を置きたい場所)】 <TABLE border="0" width="800" height="250" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD <p id="slideshow" valign="middle" width="800" height="250"> <img src="images/top_image01.jpg" class="active"> <img src="images/top_image02.jpg"> <img src="images/top_image03.jpg"> <img src="images/top_image04.jpg"></TD> </TR> </TBODY> </TABLE> --------------------------------------------------------- ※ちなみにこのページをfirefoxでソース表示すると上記body内のこの部分が赤字表示されます。 <TD <p id="slideshow" valign="middle" width="800" height="250"> 見てわかると思いますが上記body内、</p>がありません。メモ帳でtop_image04.jpg">の後に</p>を書いて上書きするのですが、その上でfirefoxで開いてもやはり画像表示位置は違うままです。さらに私は通常ホームページビルダーで作成しているのですが、このソフト上でトップページを開くとエラー検出となり自動修正され、毎回この</p>が消えています。 (しかし</p>が無い状態でもIEでは問題無く正しい位置で表示されています) こういったことも今回の現象と何か関係があるのでしょうか。以上の情報から、何か原因が特定出来るようでしたら、どうかお教え頂きたく存じます。宜しくお願い致します。

PHPでPCのローカル時刻は取得出来ますでしょうか？

PHPでPCのローカル時刻は取得出来ますでしょうか？現在、javascriptで取得しているのですが、これを PHPの変数として取得出来ないか考えております。 javascriptでは下記のように取得して表示させています。 <script type="text/javascript"> var nowtime = new Date(); var hour = nowtime.getHours(); var minute = nowtime.getMinutes(); var second = nowtime.getSeconds(); if(hour < 10) { hour = "0" + hour; } if(minute < 10) { minute = "0" + minute; } if(second < 10) { second = "0" + second; } document.write(hour,minute,second); </script> 例えば現在が12時34分56秒だとしたら、javascriptで「123456」という6ケタの数字を取得出来ます。この「123456」を、PHPの変数として使いたいです。（$jikoku = 123456）どなたかお知恵を拝借出来ませんでしょうか？何卒宜しくお願い致します。

一定時間で画像を変更するスクリプトの関数（IE）

javascript初心者です。数日前にこちらで教えていただきまして、画像をプリロードをして、画像がsetTimeoutで切り替わる動きをするスクリプト（任意の引数を与えた場所を処理する関数）ができたのですが、 IEで見たときにsetTimeoutのタイミングで毎回、画像読み込みがされているようなのですが（ブラウザの左下に文字が出てきます）これを解消するにはどうすればいいでしょうか？二箇所を同じ関数を使ってそれぞれ違う引数の付与でsetTimeoutのタイミングや読み込む画像や場所を変えています。サンプル↓こちらに上げてあります。 http://foofoo77.web.fc2.com/imagechange/index6g.html ソースは下記になります（上記と同一のものです）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一定時間で変わる画像</title> <script type="text/javascript"> var animeImg = {}; //画像プリロード function preLoad(ch) { 　var img; 　for (var i = 0; i < 4; i++) { 　　img = new Image(); 　　img.src = "images/" + ch + i + ".gif"; // 0 ～ 3.gif 　} 　// 与えられた引数を使いカウンタ用プロパティを設定　animeImg[ch] = { j: 0, fnum: 0 }; } //時間制御 var wait = new Array( 3000, 500, 3000, 3000); var wait2 = new Array( 500, 500, 500, 500); //表示画像制御 function change(ch, time, number) { 　var obj = document.getElementById(ch); 　var data = animeImg[ch]; 　obj.src = "images/" + ch + data.j + ".gif"; 　data.j++; var Num = number; 　if (data.j > Num) { 　　data.j = 0; 　} 　if (data.fnum < Num) { 　　data.fnum++; 　} else { 　　data.fnum = 0; 　} 　var wtime = time[data.fnum]; 　setTimeout(function() { change(ch, time, Num); }, wtime); } </script> </head> <body> <img src="images/image0.gif" id="image"> <script type="text/javascript"> preLoad('image'); change('image',wait,3); </script> <img src="images/imageb0.gif" id="imageb"> <script type="text/javascript"> preLoad('imageb'); change('imageb',wait2,2); </script> </body> </html>

google map吹き出し

下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

プログラムのみで複雑に画像を変える方法役

クリックすると画像が次々と変わるものを作りたいのですが、下記方法では画像の枚数が増えたり、複雑な動作を作る場合、複雑な構造になってしまうと思うのですが、少しでも複雑にならない方法はありますか？フラッシュは使わずにプログラムだけで同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript">  </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }

javascriptでの画像の先読みについて（その２）

その１からの続きです。。以下が私の作ったソースです。 <script language="JavaScript">  </script> ＃関係ないですけど、off_image()はいらないかも…。以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。よろしくお願いいたします。関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633

画像をランダムにフェードイン

【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像１" /></li> <li><img src="画像２" /></li> <li><img src="画像３" /></li> <li><img src="画像４" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。どうすれば正常に動きますか？よろしくお願いします。

jQueryで4枚の画像がフェードアウトで切り替え

4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが選択されたような状態になり、「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">１</button> <button id="btn02">２</button> <button id="btn03">３</button> <button id="btn04">４</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。ご教授いただければと思います。よろしくお願いします。

オンマウスでの拡大画像の位置指定

サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>

jqueryのスライドショー。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>

3枚の画像をフェードイン

3枚の画像を順番にフェードインさせたいのですが、ＩＥで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかＩＥ対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。ソースは下記になります。最初のパッと画像が現れる原因と対策を教えてください・・・！ <script type="text/javascript"> $(function(){ 　$('#fade li').hide(); }); $(window).bind("load", function(){ 　var interval = 400; //表示間隔　for(var i=0; i<$('#fade li').length; i++) 　　setTimeout(doFade(i), interval * i); 　function doFade(i){ 　　return function(){ $('#fade li').eq(i).fadeIn(2000); }; 　} }); </script> 【ＨＴＭＬ】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>

画像のランダム表示

初心者です。。画像のランダム表示で、下のものを使っているのですが、画像の上にカーソルをもっていったときに手のマークにしたいのですが、どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？よろしくお願いします。 <script type="text/javascript">  </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>

jQuery　変数の代入

jQuery　変数の代入 jQueryを使って.nextを押すごとに#areaに表示する画像を img1.jpg、img2.jpg、img3.jpg、、、、と切り替えたいと思っているのですが、下記のように書いても変数が入ってくれません…。どのように記述すればよいでしょうか？よろしくお願いします。 $(function(){ var i=1; $(".next").click(function(){ i++; $("#area").attr("src","img",i,".jpg"); }) })

時間で画像が切り替わらず困っています。

時間で画像が切り替わらず困っています。

質問者が選んだベストアンサー

お礼 2010/04/20 22:28

その他の回答 (2)

お礼 2010/04/20 10:35

お礼 2010/04/20 10:37

関連するQ&A

PCの時間に合わせて画像を変化させたい。

1分毎にHTMLを切り替えるJavaScript

時間帯○時○分で表示切替

nextの使い方

JavaScriptに関する簡単な質問です。

JavaScript/jQuery で元画像ファイルのサイズの取得

jQueryで画像を表示しようとすると表示しない

firefoxでの画像の表示位置が違う

PHPでPCのローカル時刻は取得出来ますでしょうか？

一定時間で画像を変更するスクリプトの関数（IE）

google map吹き出し

プログラムのみで複雑に画像を変える方法役

javascriptでの画像の先読みについて（その２）

画像をランダムにフェードイン

jQueryで4枚の画像がフェードアウトで切り替え

オンマウスでの拡大画像の位置指定

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

3枚の画像をフェードイン

画像のランダム表示

jQuery　変数の代入

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

時間で画像が切り替わらず困っています。

時間で画像が切り替わらず困っています。

質問者が選んだベストアンサー

お礼 2010/04/20 22:28

その他の回答 (2)

お礼 2010/04/20 10:35

お礼 2010/04/20 10:37

関連するQ&A

PCの時間に合わせて画像を変化させたい。

1分毎にHTMLを切り替えるJavaScript

時間帯○時○分で表示切替

nextの使い方

JavaScriptに関する簡単な質問です。

JavaScript/jQuery で元画像ファイルのサイズの取得

jQueryで画像を表示しようとすると表示しない

firefoxでの画像の表示位置が違う

PHPでPCのローカル時刻は取得出来ますでしょうか？

一定時間で画像を変更するスクリプトの関数（IE）

google map吹き出し

プログラムのみで複雑に画像を変える方法役

javascriptでの画像の先読みについて（その２）

画像をランダムにフェードイン

jQueryで4枚の画像がフェードアウトで切り替え

オンマウスでの拡大画像の位置指定

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

3枚の画像をフェードイン

画像のランダム表示

jQuery 変数の代入

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

jQuery　変数の代入