• 締切済み

jQueryで、フェイドイン・フェイドアウトを追加

fullscreenのはできたのですが、そこからのフェイドインをしてフェイドアウトをしていく仕組みを作ろうと思っていたのですが、そこだけがどうしても組み込めずにいるので助けていただけませんんでしょうか。 色々スクリプトを合体させてみたらりしてみました。 止む終えなく挫折してしまいました。 // 画像の配列を作成 var images = [ "img_001.jpg", "img_002.jpg", "img_003.jpg" ]; // 指定画像をプリロードする $(images).each(function(){ $('<img/>')[0].src = this; }); var index = 0; // 背景をコール。下記の場合、500ミリ秒で呼び出します。 $.fullscreen(images[index], {speed: 500}); setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.fullscreen(images[index]); }, 5000);

みんなの回答

回答No.1

fullscreenのが分からないので、それのURLや(過去に質問しているなら)過去の質問URLはないですか?

関連するQ&A

  • jQueryで4枚の画像がフェードアウトで切り替え

    4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。 そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが 選択されたような状態になり、 「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。 途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">1</button> <button id="btn02">2</button> <button id="btn03">3</button> <button id="btn04">4</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。 というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。 ご教授いただければと思います。 よろしくお願いします。

  • フェードによる<div>要素の背景画像の切り替え

    以下のようにして、背景画像を切り替えておりますが、 これにフェード効果を追加することは可能でしょうか。 -html- <div id="wrapper"></div> -javascript- $(function() { var i = 1; setInterval(function() { if(i > 3) i = 1; $("#wrapper").css("background","url('./images/img"+i+".jpg')"); i++; }, 4000 ); }); もし可能でしたら、具体的なソースコードも 教えて頂けますと非常に助かります。 どうぞ宜しくお願い申し上げます。

  • 画像をフェードアウト&フェードインで切り替えたい

    jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){  $("#cat-list a").click(function(){   $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text());   $("p#cat-name").text($(this).text());   return false;  }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list">  <li><a href="images/cat01.jpg">ネコ1</a></li>  <li><a href="images/cat02.jpg">ネコ2</a></li>  <li><a href="images/cat03.jpg">ネコ3</a></li>  <li><a href="images/cat04.jpg">ネコ4</a></li>  <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。

  • jqueryでの画像表示について

    どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。

  • 画像のフェードイン・フェードアウト

    現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。(あまり関係ないと思う部分は省いてます) 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 教えてください!

    教えてください!jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか? コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow 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()", 5000 ); }); よろしくおねがいします

    • ベストアンサー
    • CSS
  • 指定したフォルダの画像を一括でプリロードしたい

    ページが表示されたときに、指定した画像をプリロードするようjavascriptで実装しています。 preloadの引数に1つ1つプリロードしたいファイルを書いていかないといけないので ファイル数が多くなると手間です。 例えば img/photo1.jpg img/photo2.jpg img/thumb.jpg image/photo1.jpg image/photo2.jpg image/thumb.jpg という具合にimgとimageのフォルダがあってimgにだけある画像ファイル全てを一括でプリロード したいです。どのようなソースをかけばいいでしょうか? また、指定したフォルダ以下の画像ファイルを一括でプリロードする関数などがあるのでしょうか? function preload(imgs){   for(var i = 0; i < imgs.length; i++){    var imgObj = new Image();    imgObj.src = imgs[i];    } } preload(["./img/photo1.jpg", "./img/photo2.jpg", "./img/photo3.jpg"]);

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

  • jQUery:フェードアニメーションについて

    jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/TFujinami/8EaB こちらのソースで、フェードアニメーションで メインイメージを変化させたいのですが、 どこを修正すればよいのでしょうか。 $(function(){ var slider_interval = 4000; var slider_now = 0; var slider_max = 0; var slider_mouseover = false; var slider_img_width = $("#slider").width(); var slider_href = new Array(); function sliderScroll(){ slider_now++; if (slider_now > slider_max){ slider_now = 0; } sliderAnimation(slider_now, 'slow'); } function sliderAnimation(index, speed){ $('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){ $('#slider .thumbnail div').removeClass('now'); $('#slider .thumbnail div:eq(' + index + ')').addClass('now'); $('#slider .frame a').attr('href', slider_href[index]); }); } var sliderLoop = function(){ if (! slider_mouseover){ sliderScroll(); } slider_scroll_timer = setTimeout(sliderLoop, slider_interval); } $('#slider .thumbnail div').mouseover(function(ev){ slider_mouseover = true; slider_now = $(this).attr('data-sliderid') - 0; sliderAnimation(slider_now, 'fast'); }); $('#slider .thumbnail div').mouseout(function(ev){ slider_mouseover = false; }); $('#slider .gallery .inner div').each(function(){ $(this).css('margin-left', slider_max * slider_img_width + 'px'); $(this).css({'position':'absolute', 'margin-top':'0px'}); slider_href.push( $(this).find('a').attr('href') ); slider_max++; }); slider_max = 0; $('#slider .thumbnail div').each(function(){ $(this).attr('data-sliderid', slider_max); $(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) ); slider_max++; }); slider_max--; $('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') ); sliderAnimation(0, 'fast'); setTimeout(sliderLoop, slider_interval) }); 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。

  • jQueryで、画像クリック→フェードイン

    初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。 かなりの初心者なのです。 今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。 これは何故なのでしょうか・・・。 スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){   $("#mainimg img").attr("src","img/topimg1.jpg");   $("#mainimg p:not(:animated)").fadeIn("slow"); }) ・・・・ 小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素(大きい画像が表示されるところ)の前に、id名にfadeInと入れた部分のpです。 スクリプトに何か問題があるのかどうかもわかりません。 しかしブラウザで作動しないのはおかしいですよね。 どなたか分かる方がいれば教えてくださると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX

専門家に質問してみよう