jQueryで縦の自動スライドショーを作成する方法

このQ&Aのポイント
  • jQueryを使用して縦の自動スライドショーを作成し、スクロールボックスのバーと連動させる方法について教えてください。
  • 質問者は、自動スライドショーを作成したが、スクロールボックスのバーがそのままであることに気になっている。スクロールバーも自動スクロールさせるにはどうすればよいか教えてほしいとしている。
  • また、JavaScriptやプラグインの使用例も教えてほしいとしている。
回答を見る
  • ベストアンサー

jQueryでスクロールボックスを・・・

添付画像のような縦の自動スライドショーを作ったのですがスクロールボックスのバーがそのままなのが非常に気になります。 そこで自動スライドと共にスクロールバーもそのイメージに合わせて自動スクロールさせたいのですがどうすればいいでしょうか?プラグイン、もしくはJavaScriptの記述例を教えていただけると幸いです。宜しくお願いします。 【一部ソース】 ▼script <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); </script> ▼html <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"></li> :繰り返し : </ul> <div id="fragment-1" class="ui-tabs-panel" > <img src="img/no.jpg" alt="" width="250" /> <div class="info" > <h2></h2> </div> </div> :繰り返し : </div>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないみたいなので… 画像のスクロールバーがどの要素のスクロールバーなのかよくわかりませんが、 右側のリストがul.ui-tabs-navだと仮定して、スクロールバーもそのul要素のものだとします。 >もしくはJavaScriptの記述例を とのことなので、 ulの子要素(li)を単純に表示するだけでよければ、  element.scrollIntoView(true/false); みたいなことで表示できるはず。(elementは対象要素) あるいは、直接スクロール量を調節して  element.parentNode.scrollTop = element.offsetTop; のような方法で。(ブラウザによって多少違うようですが) ul要素でなくても、同じような方法で基本的にはできるはずです。 要素のスクロール量の制御のご参考に…  http://slightlyblue.com/blog/2006/08/javascript_1.html

ponponbisu
質問者

お礼

とても参考になり、助かりました。 ありがとうございました!

関連するQ&A

  • jQuery タブとスライダーの併用

    jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>

  • jqueryの tabを使用して外部リンクをしたい

    jqueryの tabを使用して外部リンクをしたい このサイトの下の方の マウスオーバーで切り替えを使用しているのですが タブをマウスオーバーで切り替えつつ、 タブ部分をクリックしたら外部にリンクさせるようするには どうしたらいいでしょうか? http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。 初心者で大変申し訳ありませんが、ご教授ください。 とても困っています。 よろしくお願いいたします。 ************************************************************* <!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> <head> <!-- jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ1</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ1内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身1(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか??

  • jquery ulのtab切り替えについて

    昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。 書籍のwebcreators6月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。 ソースは <!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=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ1</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ2</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか? 皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。

  • ui.tabs.jsとjScrollPane.jsの連動について

    いつもお世話になっております。 先日質問させていただいた内容に補足させていただきます。 Ui.Tabs.jsとjQuery1.2.6.jsを使ってタブを動作させ、そのコンテンツが表示領域に収まらなかった場合、jScrollPane.jsを使用してスクロールバーを表示したいと考えています。それぞれ一応動作するまでには到っているのですが、タブを切り替えた時にスクロールバーの長さがリサイズされず、タブの変移にjScrollPaneが対応してくれません。 そこでタブをクリックしたときにjScrollPaneを再度読み込むようにしてみたのですが、下記記述だとクリック前のコンテンツの長さに対応したスクロールバーが表示されてしまいます。 Ui.Tabs.jsの動作の完了後にjScrollPaneを再度読み込むように(クリック後のコンテンツの長さに対応したスクロールバーが表示されるように)スクリプトを組むことはできないでしょうか。ご教授よろしくお願い致します。 #layer1 { height: 500px; width: 600px; position: relative; top: 110px; overflow: auto; visibility: visible; } <script type="text/javascript"> $(function(){ $('#tab > ul').tabs({ fx:{ opacity: 'toggle',duration:500 } }); $('#layer1').jScrollPane({scrollbarWidth: 12}); $('#nor1,#mor12,#ho1,#hov12').click(function(){ $('#layer1').jScrollPane({scrollbarWidth: 12}); }); }); </script> </head> <body> <div id="tab"> <ul> <li><a href="#fragment-1"><span><img id="mon1" src="../diary/2009/1/diary-1mon-nor.png" alt=""/></span></a></li> <li><a href="#fragment-2"><span><img id="mon2" src="../diary/2009/2/diary-12mon-nor.png" alt=""/></span></a></li> <li><a href="#fragment-3"><span><img id="mon3" src="../diary/2009/3/diary-1mon.png" alt=""/></span></a></li> <li><a href="#fragment-4"><span><img id="mon4" src="../diary/2009/4/diary-12mon.png" alt=""/></span></a></li> </ul> <div id="layer1"> <div id="fragment-1"><img src="../2009/1/content-diary-1.png" alt="" width="520" height="950" border="0" /> </div> <div id="fragment-2"><img src="../2009/2/content-diary-2.png" alt="" width="520" height="453" border="0" /> </div> <div id="fragment-3"><img src="../2009/3/content-diary-3.png" alt="" width="520" height="1150" border="0" /> </div> <div id="fragment-4"><img src="../2009/4/content-diary-4.png" alt="" width="520" height="1150" border="0" /> </div> </div> </div> </body>

  • クリックしたら文章が入れ替わるjQuery

    クリックしたら文章が入れ替わるjQuery http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ 上記のサイトを参考につくっています。 タブではないのですが、添付画像のように数字部分を押すと中央部分の文章が入れ替わるというものです。 1と2の部分は押すと文章が入れ替わり、3を押すと違うページに飛ぶようにしようと思っています。 3のページにも同じ1~3のナビを置き、3から1、3から2にも飛ぶようにしたいのですが、このjsのままだと2を押しても1の内容が表示されてしまいます。 それを変更したいのと、 1か2がactiveの時に今どっちの内容を表示しているかわかるように色を変えたいのですが、変わりませんでした。 (サンプルだとちゃんとタブが切り替わっているようにみえるのでそのようにしたい。) 以下私のコードです。 ■■■■■■■■■■■■HTML■■■■■■■■■■■■ <div id="nav"> <ul> <li class="tabs"><a href="#1" >1</a></li> <li class="tabs"><a href="#2">2</a></li> <li><a href="3.html">3</a></li> </ul> </div> <div class="container"> <div id="1" class="content"> 1の文章 </div> <div id="2" class="content"> 2の文章 </div> </div> ■■■■■■■■■■■■js■■■■■■■■■■■■ $(document).ready(function() { $(".content").hide(); $("li.tabs:first").addClass("active").show(); $(".content:first").show(); //On Click Event $("li.tabs").click(function() { $("li.tabs").removeClass("active"); $(this).addClass("active"); $(".content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); ■■■■■■■■■■■■CSS■■■■■■■■■■■■ #nav li a{ color:#8D8D8D; text-shadow: 0px 0px 3px #fff; } #nav li a:hover{ color:#8D8D8D; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); } li.tabs active{ ←ここが変? color:#8D8D8D; } ド素人の上説明も下手で申し訳ありませんが、よろしくお願いいたします。

  • jQueryを使ってある画像を別の画像に置き換えたい。

    jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。

  • jquery教えて下さい。

    現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか? 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>

  • 同じjqueryを2つ並べて動かしたいけど動かない

    いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、2つめは動きません。 どうすれば動きますか?? 理想は■が1つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン&レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン&レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html>

  • jquery スライダーが動かない

    昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。 問題のサイト:http://snapkidz.biz/wp/ 先日の質問:http://okwave.jp/qa/q7180952.html 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。 <!-- External files --> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <!-- Favicon, Thumbnail image --> <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico"> <?php wp_head(); ?> <!-- ======================================= スライダーテスト ======================================= --> <script type="text/javascript" src="http://snapkidz.biz/slider1/script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://snapkidz.biz/slider1/style.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div class="header" id="Top"> <h1><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" alt="Art・・"></h1> <div class="nav"> <ul> <li class="nav1"><a href=""></a></li> <li class="nav2"><a href=""></a></li> <li class="nav3"><a href=""></a></li> </ul> </div> <div class="siteImage"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image2.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image3.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image4.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image5.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> <a href="#" id="slide-prev">&laquo;</a><a href="#" id="slide-next">&raquo;</a> </div> <p><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" alt="" class="top" /></p> </div> でcssが html,body{margin:0;padding:0;} #wrapper{width:980px;margin:0 auto;position:relative;} div.header{border:sold 1px solid;} div.header h1{position:absolute;top:0;left:0;} div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;} div.header div.nav ul{display:block;height:70px;width:242px;text-align:right;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/blacknav.jpg);background-repeat:no-repeat;position:relative;left:737px;top:40px;} div.header div.nav ul li{display:inline;width:85px;} div.header div.siteImage{position:relative;width:100%;min-width:640px;} div.header div.siteImage img.top{position:absolute;top:-80px;left:400px;} です。 スライダーダウンロード元:http://unformedbuilding.com/articles/jquery-simple-loop-slider/ head部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか? 宜しくお願い致します。

専門家に質問してみよう