• 締切済み

画像スライダーについて

<script type="text/javascript"> <!-- $(function(){ setInterval(function(){ $("#s3 p").attr("img"$("src")); },3000); }); --> </script> このやり方だと、時間で画像が変化しませんかね?

みんなの回答

noname#247307
noname#247307
回答No.2

>問題はタグ指定でdiv id指定の場合 >$("#3 img").attr("src",画像ファイル) これは、こういう構造になっていると考えていいわけですね。 <div id="3"> <img src=""> </div> まぁ、<div>でなくて<p>とかかも知れませんが、id="3"内に<img>タグがある、という構造であれば、$("#3 img")であっているはずです。 それ以外のところだと、画像ファイルのパスが正しいかどうか。あと、そもそもちゃんとスクリプトは呼び出されているかどうかも確認してみるとよいでしょう。

yonbakukan
質問者

補足

本日色々ためしたのですが setIntervalでattrを内包してますが、 メソッドチェーンによって途中の画像が 一瞬だけしかうつらず 一定時間で画像が切り替わらないという 問題に直面しました。 どーしたらいいでしょうか?

全文を見る
すると、全ての回答が全文表示されます。
noname#247307
noname#247307
回答No.1

実際に試してみればいいと思いますが……。なぜやってみないんでしょう? 見ましたが、$("#s3 p").attr("img"$("src"));が意味不明です。どういうことをさせようとしているのでしょうか。 <img>タグのsrc属性を設定して画像を表示したいのであれば、例えば、 $( <img>タグの指定 ).attr("src", イメージファイル ); こういう感じになると思います。イメージファイルの指定(要するにファイルのパス)を、時間ごとに変わるようにすればスライドされるようになるでしょう。

yonbakukan
質問者

補足

実際やったんですけど上手くいきませんでした。 $( <img>タグの指定 ).attr("src", イメージファイル ); 問題はタグ指定でdiv id指定の場合 $("#3 img").attr("src",画像ファイル) てな具合でしょうか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(¥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • このjqueryが稀に動かない

    画像が無いときに表示されるscriptですが稀に動かない時があります10分の4位動かないです。どのようにすればよろしいでしょうか? <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });

  • 画像をランダムにフェードイン

    【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像1" /></li> <li><img src="画像2" /></li> <li><img src="画像3" /></li> <li><img src="画像4" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか? よろしくお願いします。

  • 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>

  • 2箇所の画像をランダムに複数表示

    はじめましてjavascript初心者のものです。 2箇所に配置されてる各画像をランダムに表示したく、以下宣言をしてますがどうしても2箇所目が表示されません。お手数ですが、教えてください! 2箇所目をrandWrite_sとして名前を変更してます。 ▼▼▼▼▼▼▼▼▼▼▼▼meta内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <script type="text/javascript"> <!-- // ランダムに画像を表示する1箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01.gif"></a>', '<a href="#"><img src="/images/ad_banner02.gif"></a>', '<a href="#"><img src="/images/ad_banner03.gif"></a>' ]; function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> <script type="text/javascript"> <!-- // ランダムに画像を表示する2箇所目 var randObjects=[ '<a href="#"><img src="/images/ad_banner01_s.gif"></a>', '<a href="#"><img src="/images/ad_banner02_s.gif"></a>', '<a href="#"><img src="/images/ad_banner03_s.gif"></a>' ]; function randWrite_s() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr)[0]); randObjects.splice(rr,1); } //--> </SCRIPT> ▲▲▲▲▲▲▲▲▲▲▲▲meta内タグ▲▲▲▲▲▲▲▲▲▲▲▲ ▼▼▼▼▼▼▼▼▼▼▼▼body内タグ▼▼▼▼▼▼▼▼▼▼▼▼ <p><script type="text/javascript">randWrite();</script></p> <p><script type="text/javascript">randWrite_s();</script></p> ▲▲▲▲▲▲▲▲▲▲▲▲body内タグ▲▲▲▲▲▲▲▲▲▲▲▲

    • ベストアンサー
    • Java
  • jqueryサブウィンドウにて画像切替サブ画像表示

    質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。

  • 画像スライダーをやってますが

    <script type="text/javascript"> <!-- $(function(){ var sty=$("#s1"); sty.each(function(){ var mo1=$(this); var mo2=mo1.find("ul"); var mo3=mo1.find("li"); var mo4=mo1.find("li:first"); mo3.css({display:"block",opacity:"0",zIndex:"1"}); mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500); setInterval(function(){ mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'}); },5000); }); }); --> </script> </head> <body> <div id="s1"> <ul> <li><img src="rtp/7.jpg" width="300px" height="300px"></li> <li><img src="rtp/9.jpg" width="300px" height="300px"></li> <li><img src="rtp/10.jpg" width="300px" height="300px"></li> </ul> </div> </body> </html> 見よう見まねで成功はしましたが、見真似なのでどういう構造なのか勉強しているところです。 今日は前半をなんとかやったんですが mo3.css({display:"block",opacity:"0",zIndex:"1"}); の部分のdisplay:"block"はなぜやっているのかが解りませんでした。 最初の設定は画像を消すところだと思うのですが、だとするとなぜblockなのかが解りません。

  • リンク前後で画像を変えたい

    こんにちわ。 少し質問させていただきます。 タイトルそのままですが、 リンク前とリンク後で画像を変えたいのですが、 どうすればよろしいでしょうか? 以前にこちらでロールオーバーの質問をした時に a1_off.pngをa1_on.pngに名前で変えるやり方を教えて 頂きました。(質問自体は少し違いますが・・・) 切り替える画像の種類が多いので同様にリンク後に a1_linkbefore.pngからa1_linkafter.png a2_linkbefore.pngからa2_linkafter.png のように名前で変えたいと考えたいのですが そのような事ができるのでしょうか? できるのであれば、ご教授お願いしたいです。 ちなみにソースはこのような形です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="ja"> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('a.link').each ( function() { var imgObj = $(this).find('img'); var imgSrc = imgObj.attr('src'); $(this).mouseover ( function() { imgObj.attr ( 'src', imgSrc.replace ( /off.png/, 'on.png' ) ); }).mouseout ( function() { imgObj.attr ( 'src', imgSrc ); }) }); }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="クラス1"> <a href="a1.html" class="クラスA-1"> <span class="クラスA-1">A1</span> <img src="a1.png" border="0"> </a></p> <p class="クラス2"> <a href="a2.html" class="クラスA-2"> <span class="クラスA-2">A2</span> <img src="a2.png" border="0"> </a></p> </body> </html> よろしくお願いします。

  • javascript 画像をクリックで切り替える

    javascriptについて質問させていただきます。 <script type="text/javascript" defer> $(function(){ $('.thmbnail').hover( function(){ $("#product_large_image").attr('src', $(this).attr('src')); }, function(){ $("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source')); } ); }); </script> こちらが現在の記述です。 画像のパスを指定できないため、.thmbnailと#product_large_imageで指定しているようです。 #product_large_imageは <img id="product_large_image" class="large" src="@(imageUrl)?@ViewBag.RCC" data-image-source="@imageUrl" alt="" /> .thmbnailは <img class="thmbnail" src="@(imgPath)?@ViewBag.RCC" alt="" /> となっており、画像のパスが変動するシステムです。 現在の記述はhoverによってマウスオーバーで画像が切り替わるシステムなのですが、 これをクリックで切り替わるようにしたく、 hoverをclickに変えたところ、 動かなくなってしまいます。 対処法を教えていただければと存じます。 よろしくお願い致します。

  • 画像の入れ替え

    先日、ここで質問をして、javascript を使って画像を入れ替える方法を教えてもらいました。 <script type="text/javascript"> <!-- function toggle(img){ if(img.normal==null) img.normal=true; img.src= img.normal ? 'a.jpg' : 'b.jpg'; img.normal=!img.normal; } //--> </script> … <img src="a.jpg" alt="画像" onclick="toggle(this)"> ということだったのですが、これだと2枚の画像しか入れ替えることができないので、3枚の画像を入れ替えようと、img.src= img.normal ? 'a.jpg' : 'b.jpg': 'c.jpg';と書いてみたのですが、スクリプトエラーが出てしまって、うまくいきません。どのようにすれば、3枚以上の画像を入れ替えることができるでしょうか?ABCDEF→ABCDEFのように変っていくようにしたいのですが。 よろしくお願いいたします。