- 締切済み
JavaScriptでスライドショーを作ってみたい。
毎回お世話になっています。 僕は最近HP製作をしていて、だんだん慣れてきたので、JavaScriptやHTMLなどのスクリプト系にチャレンジしています。 ネットで調べてみると、JavaScript使ってスライドショーができるそうなのですが、スクリプトをコピーしてやってもうまくいきません。 http://www1.seaple.ne.jp/sirayuri/tenji/kawazu/kawazu.htm 上のアドレスのようにある、スライドショーのようにクロスフェードしながら写真を変えたいのですが、写真の一部しか出てこない、2枚目の写真が出てこないような問題が出てきます。 prImg1.srcの部分もわからないので、下のような感じでよろしいのでしょうか？ prImg1.src="L:\***\img\top_pict.png"; SRC=保存先指定ですか？ スクリプトの説明を見ていてもよくわからないので、ここに質問させていただきました よろしくお願いしますm(_ _)m
- RADD
- お礼率50% (9/18)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- torayoshi
- ベストアンサー率62% (910/1449)
まず「prImg1.src="L:\***\img\top_pict.png";」 これはローカルを参照してますから、このままサイトに転送すると 画像が×になります。 prImg1.src="img/top_pict.png" と、それ以下も書き直してください。 それから2枚目以降の写真が出てこない原因は、 このスクリプトで指定している画像の参照先と違う場所を指定しているからです。 あなたの場合、画像が一つ上の階層にありますし、 画像形式がjpgではなくpngのようなので、 二つ目のスクリプトのgazo1.src="image"+i+".jpg";の部分を gazo1.src="img/image"+i+".png"; と書き直してください。
関連するQ&A
- スライドショーが出来ません。。
web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、 こちらのサイト（http://kowaza.boo.jp/）の＜スライドショー＞ * フェードインしながら次々と画像を表示 * というのを参考に作ってみたのですが、全然スライドショーになりません。 何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript"> <!-- var myspd = 200; var myx = 5; var mypic = new Array("myp1","myp2","myp3"); var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } //--> </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>
- 締切済み
- JavaScript
- スライドショーなんですが・・・。
スライドショーで 下記のようなHTMLなのですが 一回停止をクリックしてから 再開をクリックすると 一枚目の写真に戻るようになっています。 停止したところから再開するにはどう直せばよいのですか？ よろしくお願いします <HTML> <HEAD> <TITLE>スライド</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- var num = 1; var flag = 1; var Fm = new Array(5); Fm[0]=""; Fm[1]=" 一枚目"; Fm[2]=" 二枚目"; Fm[3]=" 三枚目"; Fm[4]=" 四枚目"; Fm[5]=" 五枚目"; function timer() { if(document.img.complete) { document.img.filters.blendTrans.Apply(); document.img.src = "photo" + num + ".JPG"; document.img.filters.blendTrans.Play(); document.Fmess.fmess.value = Fm[num]; num++; if(num >5) num = 1; } if(flag == 1) { TimerID = setTimeout("timer()", 5000); } } function crl() { clearTimeout(TimerID); flag = 0; } function restart() { TimerID = setTimeout("timer()", 5000); num = 1; flag = 1; } //--> </SCRIPT> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="setTimeout('timer()', 6000)"> <CENTER> <IMG NAME="img" SRC="写真01.JPG" style="filter:blendTrans(duration=1)"> <FORM NAME="Fmess"> <INPUT TYPE="text" NAME="fmess" VALUE=" 説明 " SIZE=50> </FORM> <A HREF="JavaScript:crl()">[停止]</A> <A HREF="JavaScript:restart()">[再開]</A> <A HREF="JavaScript:window.close()">[終了]</A> </CENTER> <BR> </BODY> </HTML>
- ベストアンサー
- 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
- スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？ 私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣） 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript> jQuery.noConflict(); </SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript> jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0 });}); </SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○ src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。
- 締切済み
- JavaScript
- スライドショー
初めまして、ちゃりおと申します。 JavaScript初心者です。 あるページに静止画（.jpg）が３枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。 ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか？ 諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript"> <!-- function autoslide_aisa(){ document.n_aisa.src = "img/aisa_anime.gif"; } function autoslide_ann(){ document.n_ann.src = "img/ann_anime.gif"; } function autoslide_mipori(){ document.n_mipori.src = "img/mipori_anime.gif"; } // --> </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> <td align="center"> <a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> <td align="center"> <a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //スクリプトここまで
- 締切済み
- JavaScript
- 画像スライドショー用のjQueryを埋め込みたい
画像スライドショー用のjQueryを埋め込みがしたいです。 埋め込みたい物は以下のサイトの物です。 http://www.zurb.com/playground/orbit-jquery-image-slider ここの本文にもあるのですが私の思う通りにまずは記載します。 header部分に <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> を記載し埋め込みたい場所に <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" /> <img src="features.jpg" alt="and more features" /> </div> を記載するまではわかるのですが、 <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> はどこに記載するのでしょうか？？ またデレクトリーはどこにいれればいいのでしょうか？？ 基礎的な質問で申し訳ございませんが、教えて頂ける方宜しくお願い致します。
- ベストアンサー
- JavaScript
- Javascript スライドショー
Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。 おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。 どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。 よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>
- 締切済み
- JavaScript
- javascriptのスライドショーについての質問です。
javascriptのスライドショーについての質問です。 javascriptの勉強を始めたところです。ある教科書の中にjQueryを使用した スライドショーのコードが掲載されていました。それを下記のように記述しましたが、 ブラウザで確認するとスクリプトのコードがそのまま表示されてしまいます。 基本的な間違いがあるように思うのですが、宜しくご回答いただけたら嬉しいです。 <?xml version="1.0" encoding="Shift_JIS"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>slideshow</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/slideshow"></script> </head> <body> <div id="slideshow"> <img id="image1" src="/livingimg/003.jpg" alt="Image 1" /> <img id="image2" src="/livingimg/004.jpg" alt="Image 2" /> </div> <div id="imagealt"><p></p></div> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> </ul> <script type="text/javascript" </script> $(document) .ready(function(){ var slideImages = $('#slideshow > img' ); slideImage.hide().filter(':first').show(); $('imagealt p').text(slideImages.filter('first').attr('alt')); $('ul.imagelist li a').click(function(){ if (this.className.indexOf('current') == -1) { slideImages.hide(); slideImages.filter(this.hash).fadeIn(500); $('ul.imagelist li a').removeClass('current'); $(this).addClass('current'); $('#imagealt p').text(slideImages.filter(this.hash). attr('alt')); } return false; }); }; </body> </html>
- 締切済み
- JavaScript
- Javascript スライドショー
Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。 おそらく最後の $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } が上手く動いていないと思うのですが、よく分かりません。 どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。 よろしくお願い致します。 <script type='text/javascript'> var images=new Array(); images[0]='images/1.jpg'; images[1]='images/2.jpg'; images[2]='images/3.jpg'; images[3]='images/4.jpg'; var currentImage = 0; var preloaded=false; var preloading = false; function preload(){ preloading=true; for(var i=0; i<images.length; i++){ var img = new Image(); img.src=images[i]; images[i] = img; } preloaded=true; } function animateImages(){ // if already preloading, we just want to return nothing if(!preloaded && preloading) return; // if not preloaded, we want to preload if(!preloaded) preload(); // considering we have already loaded stuffs currentImage++; currentImage = currentImage % 4; $('#rotatingimage').fadeOut(1000,function(){ $(this).attr('src',images[currentImage].src); $(this).fadeIn(); } ); } </script>
- 締切済み
- JavaScript
- 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>
- ベストアンサー
- JavaScript
