JavaScriptでクレイアニメ。ちらつきを抑止する方法は？
- JavaScript初心者がWindows７とGoogleChromeを使用してクレイアニメを作成しましたが、画像がちらついてしまいます。画像タイプの問題かと思い、gifファイルも試しましたが改善されませんでした。このちらつきを抑止する方法はあるのでしょうか？
- クレイアニメを作成している中で、画像がちらつく現象が起きます。画像の種類に関係なく、チカチカする問題は解決できないでしょうか？ハード的な問題である場合、プログラムで対策することはできないのでしょうか？
- クレイアニメを作成している際に、画像がちらつく問題に悩んでいます。時折チカチカすることもあり、常時スムーズに表示される方法はないでしょうか？ネット上でチカチカを強調する方法についてはたくさん見つかりますが、チカチカを抑える方法については情報が少なく困っています。どなたか教えていただけませんか？
- ベストアンサー
JavaScriptでクレイアニメ。ちらつきます。
JavaScript初心者です。Windows７とGoogleChromeを主に使っています。 <!DOCTYPE html> <html><head><title>animation</title> <script src="js/jquery-1.11.0.min.js"></script> <style> #area{ width:420px;height:320px;text-align:center;background:gray; } </style> </head> <body> <div id="area"><br><img src='slideshow/photo0.jpg'></div> <button id="move">PLAY</button> <script> time=200;lastcode=10; count=0; $("#move").mouseover(function(){ anime=setInterval(nextfilm,time); }) .mouseout(function(){ clearInterval(anime); }); nextfilm=function() { if(count==lastcode)count=0 else{count++;} ; // count=(count==lastcode)? 0 : count+1; bufa="<br><img src='slideshow/photo"+count+".jpg'>"; $("#area").html(bufa); } </script> </body> </html> slideshowフォルダにphoto0～10.jpg（400×300px）という画像を用意し、カーソルをPLAYボタンに乗せると0.2秒間隔で次々に画像を見せるクレイアニメ及びスライドショー再生プログラムをごくシンプルに作ってみました。 実行してみると、けっこうチカチカします。画像タイプの問題かなとも思いアニメーションによく使われるgifファイルも作って試しましたが、変わりません。よく見たら、同じ画像をgifにしたらデータ量が倍以上あるんですね。 このちらつき現象、時折チカチカせずスムーズになることもあり、常時スムーズだといいのにと思うのですが、ではこれはハード的な問題でプログラムで抑止することは不可能ということでしょうか？抑止できるとしたらどんな書き方があるのでしょうか？ チカチカさせる効果の紹介はネット上でも多いのですが、逆にチカチカしてしまうのを抑えたいとなると参考にできるページに行き当たらず、ここで質問に思い立った次第です。 どなたかご教示お願いします。
- zchess
- お礼率92% (86/93)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
画像のロード時間のせいみたいなので、 最初に .hide { display:none}のようなcssを定義。 photo0～phpto10まで、全てのimgタグを作り、class=hide をつける。 としておき、setIntervalの中で、 #area > img にeach()でhideをつける。 見せたい１つのimgだけはhideを外す。 としてはどうでしょうか。
その他の回答 (1)
- pasocom
- ベストアンサー率41% (3584/8637)
試してみるべきこと。 1)違うブラウザを使ってみる。 2)タイマー間隔を200msではなく、もっと長くしてみる。 3)画像のファイルサイズを小さくしてみる。（圧縮率を上げる）
お礼
ご指摘ありがとうございます。 おもしろいことに、FireFoxでは問題が生じていないことがわかりました。 試すといろいろわかるものですね。
関連するQ&A
- 2箇所に設定したスライドショー、1箇所しか動かない
こんにちは、JavaScript超初心者です。 スライドショーを2箇所に設定したのですが、 1箇所しか動きません。ソースを見ていただき、 アドバイスを頂けると助かります。 よろしくお願い致します。 <BODY onLoad="slideshow()"> <TABLE WIDTH="" BORDER="" CELLSPACING="" CELLPADDING=""> <TBODY> <TR> <TD WIDTH="" HEIGHT=""> <IMG SRC="akaemi.jpg" ID="img1" WIDTH="" HEIGHT=""> </TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=1; var j=1; picture=new Array(); for(i=1; i<=4; i++){ picture[i] = new Image(); }; picture[1].src = "akaemi.jpg"; picture[2].src = "noristop2.jpg"; picture[3].src = "ume.jpg"; picture[4].src = "mizuba.jpg"; function slideshow(){ img1.src= picture[j].src; j++; if(j>=5){ j=1 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT=""></TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=5; var j=5; photo=new Array(); for(i=5; i<=8; i++){ photo[i] = new Image(); }; photo[5].src = "tyou1.jpg"; photo[6].src = "tyou2.jpg"; photo[7].src = "tyou3.jpg"; photo[8].src = "tyou4.jpg"; function slideshow(){ img2.src= photo[j].src; j++; if(j>=9){ j=5 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- このタグ教えて下さい
このタグを使うと画像がスライドするように3秒ごとに画像が変わって行くらしいのですが、私も使ってみたいです。 ですが何処に自分の作った画像を入れたらよいのか解りません？ 画像サイズは、横485 縦162 枚数は4枚入れてみたいです。 どうぞ宜しくお願いします。 <style type="text/css"> #photo1{ position:absolute; top:16px; left:-256px; z-index:1; } #photo2{ position:absolute; top:16px; left:16px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", ], swapImage : function(){ this.count++; if (this.count >= 3) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*16-256)+"px"; if(this.count2 > 16){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="256" height="64"> <img src="a.gif" id="photo2" width="256" height="64"> </p>
- 締切済み
- その他([技術者向] コンピューター)
- JavaScriptに関する簡単な質問です。
<script> var image1=new Image(); image1.src = "image/ny.jpg"; var image2=new Image(); image2.src = "image/tokyo.jpg"; var i = 1; function change(){ if(i==1){ element.src=image2.src; i=2; }else{ element.src=image1.src; i=1; } } </script> <img id="photo" src="image/ny.jpg" /> <script> var element = document.getElementByid("photo"); element.onclick=change; </scropt> オンクリックで画像が切り替わるというスクリプトなのですが、 new Image() というのは new date() と言うのと関係しているのでしょうか。 var i=1 と言うあたりからよくわからなくなってしまいます。 最後のelement.onclick=change;と言うのもよくわかりません。 スクリプトを平易な日本語で、簡単に説明してもらえるとありがたいです。 よろしくお願いします。
- 締切済み
- JavaScript
- JAVAスクリプトについて質問です
画像を自動で切り換えたくて 色々なサイトからコピペして作ろうとするのですが どのパターンでも最初の画像しかでないか 画像すらでないかのエラーになってしまいます。 以下のソースでどこか誤りがあるのでしょうか？ それとも 設定などの問題なのでしょうか？ お分かりになる方ご回答宜しくお願いします。 --------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> <!-- var imageList=new Array; imageList[0]=new Image; imageList[0].src="anime1"; imageList[1]=new Image; imageList[1].src="anime2"; imageList[2]=new Image; imageList[2].src="anime3"; imageList[3]=new Image; imageList[3].src="anime4"; imageList[4]=new Image; imageList[4].src="anime5"; imageList[5]=new Image; imageList[5].src="画像ファイル６"; function slideShow(imageNumber){ document.slideShow.src=imageList[imageNumber].src; imageNumber += 1; if(imageNumber < imageList.length){ window.setTimeout("slideShow(" + imageNumber + ")",2000); } } //--> </script> </head> <BODY onLoad="slideShow(0)"> <TABLE style="width: 230px; height: 180px; border: 2px outset; text-align: center;" cellpadding="0" cellspacing="10"> <TBODY> <TR><TD> <img src="http://blog-imgs-48.fc2.com/c/h/i/chikusinonekosupport/anime1.jpg" width="200" name="slideShow"> </TD></TR> </TBODY> </TABLE> </body> </html>
- 締切済み
- JavaScript
- 画像のサムネール+フォトアルバムを制作中で困っています
こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。 よろしくお願いいたします。 サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > ・ ・ ・ ・ 40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、 B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。 "mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。 上記のような方法をとりたいです。 どうか、よろしくお願いいたします。
- 締切済み
- JavaScript
- css、javascriptの外部化について
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> <!-- CSS --> <style type="text/css"> #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照：<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p> <p>▼画像がフェードしながら切り替わります。</p> <!-- CODE --> <div id="slideshow"> <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" /> <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" /> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" /> </div> <!-- / CODE --> </div> </body> </html> 上記のソースをｈｔｍｌ、ｃｓｓ、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、 お願いします 単純に cssファイル #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } javascriptファイル function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); htmlファイル <script type="text/javascript" src="JSファイルのパス"></script> <link rel="stylesheet" type="text/css" href="cssファイルパス" /> -------------------------------------- 上記でいけると思ったのですが、、、単純すぎました よろしくお願いいたします
- ベストアンサー
- JavaScript
- html内にスライドショーを複数設置
こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。
- 締切済み
- JavaScript
- JavaScriptで画像を変更する
質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。
- ベストアンサー
- JavaScript
- JavaScriptが旨く動きません
下記のタグをHEAD～/HEADの間にいれたのですが旨く行きません よろしくお願いします <script language="JavaScript"> fad=0; function wipe(img){ fad++; fad%=5; img.filters.blendTrans.Apply(); img.src="t"+fad+".jpg"; img.filters.blendTrans.Play();} </script> BODY～/BODYの間へ入れています <img src="t0.jpg"style="filter:blendTrans(duration=3);width350px; height:350px;"onClick="wipe(this)">
- 締切済み
- Mac
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
お礼
画像ロード時間に問題ありというご意見を参考に .hide{ position:absolute;left:10px;top:10px; }画像全部の配置場所を固定して <p><img class="hide" src=～～></p>とタグを画像分だけ#area中に設けて $("#area p").each(function(){$(this).hide();}); $("#area p:first").show(); スクリプト初期設定時点でｊQueryで画像消去と最初の画像表示を行い $("#area p").each(function(){$(this).hide();}); $("#area p:eq("+count+")").show(); setInterval側の画像差し替え動作をこうしてみたところ、 成功しました。すっきりしました。ありがとうございました。 ちなみに、画像読み込み場所を１箇所に重ねずページに読み込み（{display:none;}にしておく）、$("#area").html()←にimgタグを送り込むやり方も試してみましたが、これも画像読み込みを済ませてあるのに、最初と大差ないちらつくアニメでした。 画像ロードを先に済ませれば大丈夫と思ったら、そうもいかないものですね。