• 締切済み

そろそろカルーセルでアドバイス

お願いします。 $("#s1").click(function(){ $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"slow","swing", function(){ $("ul:first").appendTo("#s2") $("#s2").css("marginLeft","0px") }); }); と例えばこんな感じで時間で画像が動くようにしたいのですが どこで時間的な設定したらいいのかが解りません。 時間で動く関数とか教えてください

みんなの回答

  • DoubtOwl
  • ベストアンサー率50% (63/124)
回答No.2

お礼への追記の意図がよく分かりませんが、 $("#s1").click(function(){ $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"slow","swing", function(){ $("ul:first").appendTo("#s2") $("#s2").css("marginLeft","0px") }); }); を $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"10000","swing", function(){ にしたということでしょうか? 「slow」を任意の数字に変えるという回答なのですが。

yonbakukan
質問者

補足

すいません。補足ができなかったもの で、お礼でしかできなかったのです $("#s1").click(function(){ の形にしたいわけじゃないです。これはできるんです。 時間で画像が切り替わるようにしたいんです。 そこで $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"10000","swing", function(){ その通りです^^

  • DoubtOwl
  • ベストアンサー率50% (63/124)
回答No.1

animate関数の第2引数を変更してください。 $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"slow","swing", function(){ ↓ $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"10000","swing", function(){ ※単位はミリ秒です。上の例だと10秒かけて動きます。 使用している関数について調べたらすぐに分かりますよ。 参考URLを記載しておきます。

参考URL:
http://semooh.jp/jquery/
yonbakukan
質問者

お礼

すいません 実際やってみたのですが問題は >$("#s2".animate({・・・・ だとたとえばclickで反応させる場合 #("#s8").click という具合に何に対してとなるわけです これだと、この何がないので記述がうまくいかないと思うのですが;;;

yonbakukan
質問者

補足

有難うございます さっそくやってみます

関連するQ&A

  • どうしてもわかりません カルーセル

    $(function(){ $("#s2").click(function(){ $("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))-300+"px"},"slow","swing", function(){ $("ul.s5:first").appendTo("#s4"); $("#s4").css("marginLeft","0px"); }); }); $("#s6").click(function(){ $("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing", function(){ $("ul.s5:lest").appendTo("#s4"); $("#s4").css("marginLeft","-300px"); }); }); }); 左まわり?はできるんですが、逆方向がどうしてもできません。 animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing", のぶぶんが実はよくわかってません。 +200+"px"の部分は回転させる方向なわけですが だとすると、ある特定の位置までいったらappendなりprependがかかって 画像がお尻?につくという事なわけですが 逆方向はそうはならない。なぜなんだろうと納得できないわけです。 すいません。お願いします

  • html内にあるJavaScriptを外部に出したいのですが、書き方が

    html内にあるJavaScriptを外部に出したいのですが、書き方が分かりません。 ご指導をお願いします。 【現在html】 <script type="text/javascript"> $(function(){ //初期設定 $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselInner").css("margin-left","-620px") //戻るボタン $("#carouselPrev").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }) }) //進むボタン $("#carouselNext").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:first").appendTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }) }) // 8秒間隔でスクロール var timerID = setInterval(function(){ $("#carouselNext").click() },8000) // ユーザーが操作すると、タイマーを停止 $("#carouselPrev img,#carouselNext img").click(function(){ clearInterval(timerID); }) }) </script>

  • jsのスライドショーのボタンの時間制御について

    jsのスライドショーについて質問です。 メイン画像とサムネール画像が連動していて、5秒間で次の画像及びサムネールに自動的にスライドするというものを作りました。そして、Prevボタンやnextボタンをつけ、クリックと、手動で次のスライドに移るようにしました。 これに、切り替わったスライドから5秒間止まり次の画像に切り替わるという設定を加えたいのですが、うまくいきません。自動再生中の4秒後にボタンをクリックすると、次のスライドが1秒で、また次のスライドに切り替わってしまうのです。 どうか方法を教えてください。 <スクリプト> //自動再生 var timerID = setInterval(function(){ $('#thumbsNext').click(); },5000); $('#gallery ul').hover(function(){ clearInterval(timerID); }, function(){ timerID = setInterval(show, 5000); // マウスアウト時にスライドショーを再開 }); function show(){ $('#thumbsInner').animate({ marginLeft:parseInt($('#thumbsInner').css('margin-left'))-248+'px' },'slow','swing', function(){ $('#thumbsInner').css('margin-left','-248px'); $('#thumbsInner ul li:first').appendTo('#thumbsInner ul'); $('#thumbsList .active').next().click(); }); }

  • jquaryについて質問2

    <script type="text/javascript"> <!-- $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ color:"#00ffff" }, 1500 ); }); }); --> </script> </head> <body> <div id="s1"> <p>あいうえお</p> </div> </body> うまくいきませんでした。 あといくつか疑問に思う事がありました。 $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ marginLeft:"100px" }, 1500,"swing" ); }); }); 質問1 本ではmarginをつけないで作動するそうです。 しかし自分のはできなったのでmarginをつけました。 つけないタイプは、cssでいうところのposition absoluteを事前にしないと この記述になりません。書き方としてはmarginをつけるべきだと思うんですが。。。 質問2 もうひとつopacityのときの数値はコーテーションをいれませんでした。 ですがmarginなどの数値を入れるときにはいれます。 あえてpxという文字が関わっているとしたらparseIntなどの 関数が必要なんではないでしょうか? 毎度すみませんがお願いします

  • 【jQuery】for文ではイベント登録できない?

    複数のボタンがあり、それぞれがクリックされると、 対応したdiv要素がanimateを行う、というギミックを作成しております。 配列に複数のボタンのid名と、各div要素のid名を格納しておき、 for文でclickイベントを登録しようとしましたが、うまく動作しませんでした。 【例1】 jQuery(function($){  var buttonArray = ["#button0", "#button1", "#button2"];  var divArray = ["#box0", "#box1", "#box2"];  for(i=0; i<buttonArray.length; i++){   $(buttonArray[i]).click(function(){    $(divArray[i]).animate({width: "0px"}, "slow", "swing");   });  } }); --------------------------------------------------- 以下のように書くと、正常に動作しました。 【例2】 jQuery(function($){  var buttonArray = ["#button0", "#button1", "#button2"];  var divArray = ["#box0", "#box1", "#box2"];  $(buttonArray[0]).click(function(){   $(divArray[0]).animate({width: "0px"}, "slow", "swing");  });  $(buttonArray[1]).click(function(){   $(divArray[1]).animate({width: "0px"}, "slow", "swing");  });  $(buttonArray[2]).click(function(){   $(divArray[2]).animate({width: "0px"}, "slow", "swing");  }); }); --------------------------------------------------- そこで質問なのですが、 ・for文ではイベントの登録は行えないのか? ・今回のようなケースの場合、どのように書くのが適切か? 上記2点に関して、ご回答、ご意見を頂けますと幸いです。 どうぞよろしくお願い申し上げます。

  • jQueryでulを動かしたい。

    javascript初心者です。 jQueryを使ってみようとしています。 ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。 調べてみるとanimateが使えそうなので、 window.onload = function(){   $("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。 教えていただけるとありがたいです。 お願いしますm(__)m

  • JavaScriptのプログラムについて

    $(function(){ $("#top a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#question a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q001 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q002 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q003 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q004 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTMLは少し分かりますが JavaScriptがまったく分からない素人です。 ネットで調べて上記のようにプログラムし ページ内リンクを流れるようにスクロールさせることは出来ました。 まずこのプログラムの書き方で合っていますでしょうか? また、同じ記述が繰り返されているので短くしてやろうと自分なりに $("#q001 a") $("#q002 a") $("#q003 a") $("#q004 a") $("#q005 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) ↑のような全くの当て推量の書き方をしてみましたが動作しませんでした。 省略したり短く出来る余地があればそれも教えていただきたいです。 分かる方がおられましたらお願いします。

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

    <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なのかが解りません。

  • JQueryについて教えて下さい。

    html部分は <ul>  <li>テスト1です。</li>  <li>テスト2です。</li>  <li>テスト3です。</li> </ul> <div id="test">test</div> となっており、 スクリプト部分は、 $("ul li:not(:first)").css("display","none"); $("#test").click(function(){   if($("+li",this).css("display")=="none"){     $("li").slideUp("slow");     $("+li",this).slideDown("slow");   } }); としています。 やりたいことは、"test"をクリックしたら、 次の"li"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。

  • jqueryの変数を関数の外に出す方法

    すみません非常に困っております。 setMove()の中のspeedを関数の外に出したいのですが、 どのようにすればよろしいでしょうか。 引数などを使用すればいいのだとおもいますが、 やり方がわからず。申し訳ございませんがご教示のほど よろしくお願いいたします。 var target = $('ul#mainNavi li').find('.light'); var speed = 1000; var t = setInterval(setMove() , speed); function setMove(){ target.animate({left:600} , 1000 , 'swing' , function(){ $(this).css('left' , -118) ; speed = 3000; }); }

専門家に質問してみよう