CSS+Javascriptでスライドショーを作成する方法
- CSSとJavascriptを使用して手動で画像を順番に表示させるスライドショーを作成したいです。
- 現在はidが同じページ内で重複している点やdivにnameを付ける点で構文チェックに引っ掛かっています。
- 同じ動作を実現しつつ、idの重複やnameの使用を回避する方法を教えていただけると助かります。
- ベストアンサー
CSS + Javascript でスライドショー
手動で画像を順番に表示させる、スライドショーのような表現を作ろうとしています。 色々なサイトを参考に見よう見まねで作成してみたのですが、 途中でうまくいかずに行き詰っております(´・ω・`) ［XHTML］ <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="slide" name="slide"><p>1</p></div> <div id="slide" name="slide"><p>2</p></div> <div id="slide" name="slide"><p>3</p></div> <div id="slide" name="slide"><p>4</p></div> <div id="slide" name="slide"><p>5</p></div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-10000)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(10000)">last</a> ［Javascript］ var selected = 0; function seltab(move) { o = document.getElementsByName("slide"); selected = selected + move; if (selected < 0) {selected = 0} if (selected >= o.length) {selected = o.length - 1} for (i = 0; i < o.length; i++) { if (i == selected) { o[i].style.display = "block"; } else { o[i].style.display = "none"; } } } このやり方で一応動作はしています（WIN IE + WIN Firefox にて確認） が、id が同じページ内で重複している点と、div に name を付ける点で、構文チェックに引っ掛かってしまう為、できればそれを回避したいなと思っています。 同じ動作が作れれば、Javascript の処理方法に特に拘りはありません。 お分かりになる方がいらっしゃれば、ぜひぜひご指導お願いします。
- trink
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
FirefoxはchildNodesにテキストノードが入ってくるの忘れてました。 <html> <head> <script type="text/javascript"> <!-- var _i=0,ds=null; function seltab(move) { if(!ds){ds=document.getElementById("orz").getElementsByTagName("div");for(var i=1;i<ds.length;++i)ds[i].style.display="none";} var i=move==-2?0:move==-1?_i-1:move==0?0:move==1?_i+1:move==2?ds.length-1:0; if(i!=_i && 0<=i && i<ds.length){ds[_i].style.display="none";_i=i;ds[_i].style.display="block";} } --> </script> </head> <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="orz"> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> <div><p>4</p></div> <div><p>5</p></div> </div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-2)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(2)">last</a> </body> </html> でおｋ
その他の回答 (1)
- talepanda
- ベストアンサー率58% (45/77)
別に構文チェックにそこまでこだわる必要もないと思いますが、 <html> <head> <script type="text/javascript"> <!-- var e=null; function seltab(move) { var te=null; switch(move){ case 0:for(var i=0;i<document.getElementById("orz").childNodes.length;++i) document.getElementById("orz").childNodes[i].style.display="none"; case -2:te=document.getElementById("orz").childNodes[0];break; case -1:te=e?e.previousSibling:null;break; case 1:te=e?e.nextSibling:null;break; case 2:te=document.getElementById("orz").childNodes[document.getElementById("orz").childNodes.length-1];break; default:break; } if(e && te)e.style.display="none";if(te){te.style.display="block";e=te;} } --> </script> </head> <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="orz"> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> <div><p>4</p></div> <div><p>5</p></div> </div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-2)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(2)">last</a> </body> </html> みたいな。
お礼
ご回答ありがとうございます！ 早速試してみたところ、IE では希望通りの動作を確認できました！ HTMLソースも無駄なIDなどが省けてとても嬉しいです。 ただ、残念ながら Firefox では全ての内容が表示されたままで、うまく動作してくれませんでした。 頂いたソースを元に、これから解決策を探してみようと思います。 どうもありがとうございました。
関連するQ&A
- 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エラーについて
お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか？ 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
- 【短い】1つだけ展開/表示/非表示/開閉【Javascript】
このスクリプト、もっと短くなりませんか？ idがdisp0,disp20などdisp+数字になっているものを開閉するスクリプト。 動作：対象を開き他を閉じる、対象が開いていた場合対象を閉じる。 条件：連番（0から順番）じゃなくても（0,1,2,7みたいに飛んでも）動作する。 <html> <head> <title>1つだけ展開/表示/非表示/開閉</title> <script> //idがdisp+数字のものを格納 var kakunou = new Array(); window.onload=function(){ var tags=document.getElementsByTagName("*"); for(var i=0;i<tags.length;i++){ if(tags[i].id.match(/^disp[0-9]+$/)){ mituketa=tags[i].id.match(/^disp[0-9]+$/); kakunou.push(mituketa); } } } //開閉処理部分 function disp(tage) { for(i=0;i<kakunou.length;i++){ cb = document.getElementById(kakunou[i]).style; if(kakunou[i]==tage){ if (cb.display == 'none') cb.display = "block"; else cb.display = "none"; } else { cb.display = 'none'; } } } </script> </head> <body> <a href="javaScript:disp('disp1')">＋</a>■検索サイト１<br> <div id="disp1" style="display:none"> ├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br> ├<a href="http://www.goo.ne.jp/" >Goo</a><br> └<a href="http://www.lycos.co.jp/">Lycos</a><br> </div> <a href="javaScript:disp('disp200')">＋</a>■検索サイト２<br> <div id="disp200" style="display:none"> ├<a href="http://www.infoseek.co.jp/">Infoseek</a><br> ├<a href="http://www.google.com/" >Google</a><br> └<a href="http://kids.goo.ne.jp/">Kids Goo</a><br> </div> <a href="javaScript:disp('disp30')">＋</a>■検索サイト３<br> <div id="disp30" style="display:none"> ├<a href="http://www.excite.co.jp/">Excite</a><br> └<a href="http://www.msn.com/" >MSN</a><br> </div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptがfirefoxで作動しない
IEでは正しく作動するjavascriptがfirefoxではうまく作動しません。なぜなのかどなたか教えてください・・・・！ <script type="text/JavaScript"> flag = false; function pd1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } </script> ここからhtml <div id= "w1"><a href="javascript:pd1()" >テキスト</a></div> <div id="ID1" style="visibility: hidden;"> <p>テキスト</p></div> 以上です。まだまだ超初心者です。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像によるスライドショー
http://smallwebmemo.blog113.fc2.com/blog-entry-333.html 上記のURLを参考に画像によるスライドショーを作成しました。 これを改良して、時間や日にちによって画像が自動変更するようにしたです。 javascriptファイルの記述でdocument.getElementById("slideshow").innerHTMLを使って表示させようとしたのですがうまく行きません。 困っています。 ------------------------------test.js------------------------ window.onload = function() { var dbData = new Array(); dbData.push({"namae":"取替えステップ その1", "photos":"photos/step_01.jpg", "setumei":"通し棒の付いた方をパンツの通し口から挿入します。", "thumbnails":"thumbnails/step_01_thumb.jpg"}); dbData.push({"namae":"取替えステップ その2", "photos":"photos/step_02.jpg", "setumei":"通し棒を1周させます。", "thumbnails":"thumbnails/step_02_thumb.jpg"}); dbData.push({"namae":"取替えステップ その3", "photos":"photos/step_03.jpg", "setumei":"通し棒が1周したら通し棒とホックを外します。", "thumbnails":"thumbnails/step_03_thumb.jpg"}); dbData.push({"namae":"取替えステップ その4", "photos":"photos/step_04.jpg", "setumei":"ゴムの両端のホックを結合します。", "thumbnails":"thumbnails/step_04_thumb.jpg"}); dbData.push({"namae":"取替えステップ その5", "photos":"photos/step_05.jpg", "setumei":"パチン！ と音がしたら結合完了！", "thumbnails":"thumbnails/step_05_thumb.jpg"}); var msg = " "; for (var i = 0; i < dbData.length; i++) { msg += "<li>"; msg += "<h3>" + dbData[i].namae + "</h3>"; msg += "<span>" + dbData[i].photos + "</span>"; msg += "<p>" + dbData[i].setumei + "</p>"; msg += "<img src= '" + dbData[i].thumbnails + "' >"; msg += "</li>"; document.getElementById("slideshow").innerHTML= msg; } } ------------------------------html------------------------------ <!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>かんたん取替えステップ</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="test.js"></script> </head> <body> <div id="title_area"></div> <ul id="slideshow"> //ここにjavascriptのソースより表示したい画像を表示 </ul> <div id="wrapper"> <div id="fullsize"> <div id="imgprev" class="imgnav"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> <div id="thumbnails"> <div id="slideleft" title="Slide Left"></div> <div id="slidearea"> <div id="slider"></div> </div> <div id="slideright" title="Slide Right"></div> </div> </div> <script type="text/javascript" src="compressed.js"></script> <script type="text/javascript"> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs="slider"; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script> </body> </html> ---------------------------------------------------------------- 上記のソースは、素人なりに考えて作ったのですが、やはり素人（泣）画像が表示されません。。 どなたか助けてください。 参考URLでもありましたら助かります。
- ベストアンサー
- JavaScript
- タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> <h2>page1</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab"> <li><a href="#page1"><span>page1を選択中</span></a></li> <li><a href="#page2"><span>page2</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> <div id="page2"> <h2>page2</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab2"> <li><a href="#page1"><span>page1</span></a></li> <li><a href="#page2"><span>page2を選択中</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。
- ベストアンサー
- 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でスライドショーを2箇所
お世話になります。 http://bunjin.com/java/ こちらの「画像操作→スライドショーのように画像を表示する」を参考にして、 フェードインするスライドショーを2か所に表示させたいと考えています。 1か所なら上手くいくのですが、2か所目がエラーになってしまいます。 外部jsファイルに次のように記入し、 ------------------------------------------------------ // JavaScript Document var fade_speed = 10000; var fade_duration = 10; var image = new Array(); image[0] = '1.jpg';image[1] = '2.jpg';image[2] = '3.jpg'; var t; var j = 0; var p = image.length; var pre_load = new Array(); for (i = 0; i < p; i++) { pre_load[i] = new Image(); pre_load[i].src = image[i]; } function start_fade() { if (document.all) { document.images.photo2.style.filter="blendTrans(duration=fade_duration)"; document.images.photo2.filters.blendTrans.Apply(); } document.images.photo2.src = pre_load[j].src; if (document.all) { document.images.photo2.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('start_fade()', fade_speed); } photo[0] = '4.jpg';photo[1] = '5.jpg';photo[2] = '6.jpg'; var t2; var j2 = 0; var p2 = photo.length; var pre_load = new Array(); for (i2 = 0; i2 < p2; i2++) { pre_load[i2] = new Image(); pre_load[i2].src = photo[i2]; } function start_fade2() { if (document.all) { document.images.photo3.style.filter="blendTrans(duration=fade_duration)"; document.images.photo3.filters.blendTrans.Apply(); } document.images.photo3.src = pre_load[j2].src; if (document.all) { document.images.photo3.filters.blendTrans.Play(); } j2 = j2 + 1; if (j2 > (p2 - 1)) j2 = 0; t2 = setTimeout('start_fade2()', 8000); } ------------------------------------------------------ htmlには <body id="top" onLoad="start_fade()"> <img src="1.jpg" name='photo2' /> <img src="4.jpg" name='photo3' /> のように記入しています。 後半の2か所目の指定がどこか足りない又は違うのではないかと思うのですが、 色々試してみても上手くいきません。 ご教授をお願いいたします。
- ベストアンサー
- JavaScript
- Jqueryスライドが動きません。教えてください
WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします
- ベストアンサー
- JavaScript
お礼
ありがとうございます！！ 無事に Firefox でも動作しました！ 教えて頂くだけで終わらせずに、教えて頂いたスクリプトの中身について、これからきちんと勉強していこうと思います。 大変貴重な情報をご提供頂き、ありがとうございました！