• 締切済み

バナーループについて

flash使用なしのxmlファイルを使用して、ループするローテーションバナーかバナーループをやりたいと思っております。 海外サイトでjsを見つけて、テストをしようと思ってくんでみたのですがうまくいきません。 色々しらべたのですが手詰まり感で質問しました。 宜しくお願いします js <script> function change_banner(){ data=xmldata[sample]; //get current banner XML object img=$(data).attr("src"); //retrieve variables href=$(data).attr("href"); target=$(data).attr("target"); $(".banner_img_href").attr("href",href); //change variables on HTML $(".banner_img_href").attr("target",target); $("#banner_image").attr("src",img); } </script> </head> html <body> <div class="banner"> <div class="banner_text"> <a class="banner_img_href" href="http://someurl.com"> <img src="images/xF0mp.gif"> </a> </div> <div class="banner_img"> <a class="banner_img_href" href="http://someurl.com"> <img border='0' src="images/tO9x.gif" id='banner_image' alt='Banner Image' /> </a> </div> </div> xml <?xml version="1.0" encoding="utf-8"?> <list_database> <row> <src>/images/p2B12.gif</src> <url>http://autoway.jp/</url> <target></target> </row> <row> <src>/images/xF0mp.gif</src> <url>p2B12.gif</url> <link>http://www.yahoo.co.jp/</link> </row> </list_database>

みんなの回答

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

何がどうわからないの? 我々にはそれがわかりません。

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

> うまくいきません おっしゃりたいことは良くわかるのですが、貴方が発見された海外サイトがどのようなもので、具体的にどこがうまくいかないのか不明なので、アドバイスしようがありません。 1.Ajaxによりxmlを読込み、オブジェクト配列に展開する 2.一定時間ごとにイベントを発生させ、1の配列から要素を抽出して表示メソッドに送る。 3.表示メソッドで指定画像をリンクとともに表示する。 というプロセスだと思うのですが、ご提示のサンプルは3の一部のようで、1と2が見当たりません。 ソースコードはどのようなものだったのでしょうか?

関連するQ&A

  • jqueryについて(v 1.4.2)

    jqueryについて(v 1.4.2) <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。

    • ベストアンサー
    • AJAX
  • srcに「banner.」で始まるファイルを指定しているimgタグが消える

    急に謎の症状が発生して困っています。 何か知っている方がいたらご教示お願いします。 謎の症状が起きるスクリプトの例------------------------ echo '<div>'; echo '<a href="hoge1"><img src="img/banner.jpg"></a>'; echo '<a href="hoge2"><img src="img/banner2.gif"></a>'; echo '<a href="hoge3"><img src="banner.gif"></a>'; echo '<a href="hoge4"><img src="banner.png"></a>'; echo '<a href="hoge5"><img src="hogehoge.gif"></a>'; echo '</div>'; ------------------------------------------------------ 上記のようなスクリプトを実行した場合に、3行目の「img/banner2.gif」と6行目の「hogehoge.gif」を指定しているimgタグしか表示されません。 残りはimgタグの部分だけ綺麗さっぱりに消えてaタグの部分だけ表示されます。実行結果が下記のようになるのです。(実際には改行されませんが、見やすいように改行してます。) 実行結果--------------------------------------- <div> <a href="hoge1"></a> <a href="hoge2"><img src="img/banner2.gif"></a> <a href="hoge3"></a> <a href="hoge4"></a> <a href="hoge5"><img src="hogehoge.gif"></a> </div> ----------------------------------------------- banner.gifやimg/banner.gifは表示されるファイルと同じディレクトリの中に存在しています。 昨日ちゃんと表示されていたのを確認しました。そのときからサーバーの設定は変更していないので、何が原因なのかが分かりません。 過去に同じような症状が起こった方はいないでしょうか? PHPのエラーログを見てもエラーも警告もありませんでした。 【環境】 OS: CentOS/5 HTTPD: Apache/2.2.3 PHP: PHP/5.1.6(eAccelarator、ZendOptimizerが入ってます) ちなみに「banner」だけだとOKでした。「banner.」が付くとダメみたいです。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • バナーの画像がblogで表示されない

    HPを開設し、ブログにリンクするようにしています。 HPのバナーを創ったので、HP内のリンクページに貼りました。 こちらは何とかうまくいったのですが、 blogの方が、画像が出ません「×」になっています。 タグは以下です。これでHP内は見えます。 (1)どんな原因が考えられるでしょうか。 (2)img srcのところ、「..」でなく先のURLにすると画像がグレーになります。なぜでしょうか? <a href="URL"><img src=" ../images/banner.gif" width="88" height="31" alt="テキスト" /> なお、別のブログ検索サイトのバナーは、そこが用意していたタグを 貼り付け、簡単にできました。よろしくお願いします。

  • バナーの貼り方が、わかりません…

    HPは、魔法のiらんどと言うサイトを使ってます。 <!-- smaf global banner --> <a href="http://smaf-yamaha.com/"> <img src="img/smaf_banner_full.gif" width="468" height="60" border="0"></a> <!-- smaf global banner end --> これを貼ってますが、画像が表示されません。 バナーの枠は、でますが×になってます… 何か他に必要なのでしょうか?

    • ベストアンサー
    • HTML
  • jquery1.4で画像とリンクの切り替えを行おうとしています。

    jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか? 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }

  • CSSにてfloat:leftを使用して画像を3つ並べたのですが。。

    CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません(ToT) 教えてくださいm(__)m 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }

  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>(RSS 2.0)" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>(Atom)" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • JQueryを使ってcssを書き換え

    何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });

  • 自動で表示切り替えをしたい!!

    下記のリストを、数秒ごとに一つずつ順に表示させるにはどうすればよいでしょうか? クリックすればそこに移動し、ほっとくとまた動き出すものが良いのですが。 (本当は、オンマウスだけで表示が替わるようにしたいです!!) アドバイスお願いします>< <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Show Banner $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists $(this).addClass('active'); //add class of 'active' on this list only return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); //Toggle Teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); }); });//Close Function </script> </head> <body> <div id="main" class="container"> <div class="main_image"> <img src="banner1.jpg" alt="- banner1"> <div class="desc"> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </div><!-- desc --> </div><!-- main_image --> <div class="image_thumb"> <ul> <li> <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" width="50" height="38"></a> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" width="50" height="38"></a> <div class="block"> <h2>タイトル2</h2> <small>04/11/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" width="50" height="38"></a> <div class="block"> <h2>タイトル3</h2> <small>04/12/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" width="50" height="38"></a> <div class="block"> <h2>タイトル4</h2> <small>04/13/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" width="50" height="38"></a> <div class="block"> <h2>タイトル5</h2> <small>04/14/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" width="50" height="38"></a> <div class="block"> <h2>タイトル6</h2> <small>04/15/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> </ul> </div><!-- image_thumb --> </div><!-- container --> </body>

  • jCarouselLiteループ時の属性値取得

    jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分5つの1ループ目はそれぞれ取得できるのですが、2ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){   alert($(this).attr("href"));//←2周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。