- 締切済み
サイトに横スクロールのスライドを設置したいのですが
横スクロールするスライドショーを作りたくて、ソースを試しているのですが、 用意している画像が流れ終わると空白になってしまいます。 ループさせるにはどうしたらよいですか？ 一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものを 探していて、知恵袋でソースを教えてもらいましたが、一度画像が流れきると空白になってしまいます。 下のソースでループの設定ができるのかわかりません。 どなたか解読できる方いましたら教えてください。 <html> <head><title>test</title> <style type="text/css"> div#screen, div#screen img { width:300px; height:150px; } div#screen { overflow:hidden; } div#screen div { position:relative; width:600px; } </style> <script type="text/javascript"> window.onload = function() { var interval = 30, step = 2; var e, w, c, i, t = document.getElementById('screen'); e = t.getElementsByTagName('IMG'); if (!e.length) return; w = t.currentStyle?t.currentStyle['width']:document.defaultView.getComputedStyle(t, null).getPropertyValue('width'); t = e[0].parentNode; c = t.childNodes; for (i=c.length-1; i>-1; i--) if (c[i].nodeName != 'IMG') t.removeChild(c[i]); t.appendChild(e[0].cloneNode(true)); w = parseInt(w) t.style.width = (w * e.length) + 'px'; c = w * (e.length - 1), w = 0, e = null; setInterval(function(){ w = (w - step) % c; t.style.left = w + 'px'; },interval); } </script> </head> <body> <div id="screen"> <div> <img src="A.jpg"> <img src="B.jpg"> <img src="C.jpg"> <img src="D.jpg"> </div> </div> </body> </html>
- miyuvin
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
- kamepanman
- ベストアンサー率43% (19/44)
関連するQ&A
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- テキストにマウスオーバーで画像表示(続き)
テキストにマウスオーバーで画像表示(続き) 以下のような回答を頂きました。 > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#target div { float:left; } div#target ol { width:150px; cursor:pointer; color:red; } div#target ol img { display:none; } div#target div.screen { width:300px; height:150px; border:1px solid #00f; } </style> </head> <body> <div id="target"> <div> <ol type="1"> <li>text1<img src="A.jpg" alt="A"></li> <li>text2<img src="B.jpg" alt="B"></li> <li>text3<img src="C.jpg" alt="C"></li> <li>text4<img src="D.jpg" alt="D"></li> <li>text5<img src="E.jpg" alt="E"></li> </ol> </div> <div class="screen"> <img src="defalt" alt=""> </div> </div> <script type="text/javascript"> <!-- (function(id) { //@cc_on @set @V = (@_jscript_version <= 5.8) function eventfunc(e) { var p, t = e./*@if(@V)srcElement @else @*/target/*@end @*/; if (t.nodeName != "LI") return; p = t.parentNode.parentNode.nextSibling; while (p && p.nodeName != "DIV") p = p.nextSibling; if (p.className != "screen") return; if ((t = getImg(t)) && (p = getImg(p))) p.src = t.src, p.alt = t.alt; } function getImg(e) { var c = e.firstChild; while(c && c.nodeName != "IMG") c = c.nextSibling; return c?c:null; } var e = document.getElementById(id); if (e) { e = e.getElementsByTagName("OL")[0]; e./*@if(@V)attachEvent("on" + @else @*/addEventListener(/*@end @*/"mouseover", eventfunc, false); } })("target"); // ←id of div //--> </script> </body> </html> < 書かれている内容自体が分からないのですが、コピーして応用したところ "defalt"の画像が「×」表示になっており、テキストにマウスを合わせると画像表示は されるのですが、最初の状態で何も見えない状態か、枠線のみにしたいのですが? 回答頂いた方に更に質問して頂けたら良いのですが、初心者な者ので方法が 分かりません。 また、よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryでn秒後に要素を最後に移動
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。
- ベストアンサー
- JavaScript
- 「2枚1組の画像」3セットを1セットずつランダムで表示させたい。
Javascriptの書き方はよく分からない素人です。 いつもソースを探してきて使っているレベルです。 やりたい内容に似たソース（▼以下）を探してきたのですが、 もともと「2枚1組の画像」を2セットずつ表示させるもので、 変更の仕方が分からないので教えていただきたいです。 さらに、「一定時間ごと」ではなく、 「ページを読み込む度」に表示を変えたいです。 （この場合全く違う書き方をすることになるのでしょうか？） よろしくお願いします。 ▼ここから－－－－－－－－－－－－－－－－－－－ <script language="javascript"><!-- setInterval("textch()",3000); TEXT = new Array('text0','text1','text2'); function textch() { for(i=0; i<TEXT.length; i++){ var tmpA, tmpB, rnd; rnd=Math.floor(Math.random() * TEXT.length); tmpA=TEXT[i]; tmpB=TEXT[rnd]; TEXT[i]=tmpB; TEXT[rnd]=tmpA; } for(j=0;j<TEXT.length;j++) { document.getElementById(""+TEXT[j]+"").style.display = "none"; if(j == 0 || j == 1) { document.getElementById(""+TEXT[j]+"").style.display = "block"; } } } //--></script> <div id="text0"><img src="images/a.jpg" alt="A" width="410" height="168"><img src="images/b.jpg" alt="B" width="470" height="168"></div> <div id="text1"><img src="images/c.jpg" alt="C" width="410" height="168"><img src="images/d.jpg" alt="D" width="470" height="168"></div> <div id="text2"><img src="images/e.jpg" alt="E" width="410" height="168"><img src="images/f.jpg" alt="F" width="470" height="168"></div>
- ベストアンサー
- JavaScript
- ページ内に複数のJQueryスライドを設置したいが
JQuery勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。 使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。 http://galleria.io/themes/classic/ これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。 ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。 下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。 しかし、<div id="btn1">～</div>をクリックすると、 オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいに ギャラリー画面上に 「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」 と表示されます。 どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、 どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。 何卒よろしくお願いします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script src="../common/js/galleria-1.2.9.min.js"></script> <script> /* オーバーレイ表示用のcss */ <style type="text/css"> #btn1,#btn2 { display:block; width: 420px; height: 281px; cursor: pointer; } #overlay1,#overlay2 { display: none; width: 100%; height:100%; position: fixed; top: 0; z-index: 100; background: rgba(0,0,0,0.8); } #close1,#close2 { width: 80px; cursor: pointer; position:absolute; top:50px; right:0; } </style> </head> <body> <div id="overlay1"> /* オーバーレイ用のボックス */ <div id="galleria"> /* １つ目のスライドショー用のボックス */ <a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a> <a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a> <a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a> </div><!-- #galleria --> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay1 --> <div id="overlay2"> /* オーバーレイ用のボックス */ <div id="galleria1"> /* ２つ目のスライドショー用のボックス */ <a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a> <a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a> <a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a> </div><!-- #galleria --> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay2 --> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("#overlay1").fadeIn(); }); $("#btn2").click(function() { $("#overlay2").fadeIn(); }); $("#close1").click(function() { $("#overlay1").fadeOut(); }); $("#close2").click(function() { $("#overlay2").fadeOut(); }); }); </script> /* ギャラリーをオーバーレイ表示するためのボタン */ <div id="container" class="clearfix"> <div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div> <div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div> </div> /* ギャラリー用オプション＆JQuery呼び出し用 */ <script> // Load the classic theme Galleria.loadTheme('../common/js/galleria.classic.min.js'); option = { width: 900, // 幅 height: 600, // 高さ imageCrop: false, // 画像のクロップ有無 // true：width/heightにフィットさせるように画像を切り取って表示 // false：画像を全体表示させるように縮小 transition: 'fade', // 画像の遷移イフェクト _toggleInfo: false, // imgのalt属性を取得してキャプションとして表示 // true：キャプションの非表示 // false：キャプションの表示 } // Initialize Galleria Galleria.run('#galleria',option); Galleria.run('#galleria1',option); /* ←idを分けてみたりしました。 */ </script>
- 締切済み
- JavaScript
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- javascript src書き換え
javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!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=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。
- ベストアンサー
- JavaScript
- float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
- jquery 要素数に応じたwidthの取得方法
ご質問です。 下記の様なソースで、リストの数がページにより変わります。 <div class="wrap" style="width:○○px"> <li><img src="hoge.jpg" width="100px"></li> <li><img src="hoge.jpg" width="100px"></li> </div> これをjqueryで取得して、width:○○pxに入れる方法を知りたいです。 画像のwidthは、共通です。 ご存知の方いらっしゃれば、ご教授をお願いいたします。
- 締切済み
- JavaScript
