http://flowplayer.org/tools/scrollable/index.html

こちらのサイトのjquery.scrollable.jsに関しての質問です。
scrollable.jsを動かすページに
jquery.scrollable.min.js
jquery.mousewheel.js
を読み込ませています。

あとはhead部分に
<script type="text/javascript">
$(function() {
$("#scrollable").scrollable({
horizontal:true,
});
});
</script>
を記述しています。

html部分は
<div id="scrollable">

<div class="navi"></div>

<a class="prev"></a>
<div class="items">
<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>
<a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a>
<a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
</div>
<a class="next"></a>
</div>

簡単に記述してあります。(サイト記載の通り)
これで問題なく左右に動くのですが、
このitemsの部分をループさせるように設定したいのです。(15の隣に1、1の隣に15のように)
色々と調べて試してみましたが知識不足のためかうまく作動しません。
お力をお貸し頂ければと思い質問致しました。
できましたらお早い回答をよろしくお願い致します。

このQ&Aに関連する最新のQ&A

js」に関するQ&A: html&CSS&jsはどこにある?

A 回答 (3件)

#1です。



やっぱり circular: true ではないでしょうか?

最小限にしてみて、こんなので循環すると思いますけれど…?
(英語をちゃんと読むのは大仕事なので、かなり適当です)



* 面倒なのでクリックで次を表示の仕様にしています
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#scrollable { position:relative; overflow:hidden; width:195px; height:195px;}
#scrollable .items {position:absolute; width:4000px;}
#scrollable .items a {display:block; float:left; width:200px; height:200px; background-color:#ffc; border-right:1px solid #aaa;}
</style>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.too …
<script type="text/javascript">
<!--
$(function() {
$("#scrollable").scrollable({ circular: true }).click(function(){
$(this).data("scrollable").next();
});
});
//-->
</script>
</head>

<body>
<div id="scrollable">
<div class="items">
<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>
<a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a>
<a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
</div>
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

お礼が遅くなってしまって申し訳ありません。
迅速な対応をありがとうございました。
無事上記のソースで出来ました。
もう少し英文の読解力と、javascriptの知識を身に着けるよう努力致します。
ありがとうございました!

お礼日時:2011/04/21 12:58

#2です。



サイトの自動リンク機能のために、#2のソースのライブラリ読込みの<script>タグ部分がおかしくなってしまいました。
修正してお読みください。
    • good
    • 0

試してませんけれど、ご提示のサイトの説明部分に書いてあるような…



 http://flowplayer.org/tools/scrollable/index.htm …
英語が苦手なので斜め読みですが、この(↑)表でみると、オプションで
 circular: true
を設定してあげればよさそうな感じがしますけど。

この回答への補足

迅速な回答ありがとうございます。
すみません、circular: trueは試してみたのですがオプションはどこに・どのような文法で記述するのかが分からず…といった感じでした。
ヘッダーに
<script type="text/javascript">
$(function() {
$("#scrollable").scrollable({
horizontal:true,
circular: true
});
この様に入れてみたのですが駄目でした。
申し訳ないです…。
});
</script>

補足日時:2011/04/11 18:46
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qトヨタのピクシスのオプションについて

トヨタのピクシスのオプションで、HIDは、オプションで付けることはできないでしょうか。ネットのカタログを見た限りでは、オプションはなかったようなのですが、誰かご存知の方教えてください。

Aベストアンサー

カスタムなら標準装備ですが、それじゃダメなのかな?
ノーマルグレードではオプション(HIDは通常メーカーオプション) 設定すらありませんから。

Qhttp://www.skuare.net/test/horizont

http://www.skuare.net/test/horizontinyscrolling.html
上記のサイト様で使用しているjavascriptを使ってデザインを考えています。

上記のサイト様は、メニューとコンテンツが同じフレーム内(階層)にありますが、
これを、メニューとコンテンツを別々のフレームに入れ(コンテンツ部分はインフレームに入れたいです。)、メニューを常に見える状態にしたいです。
(添付画像参照)

上記の状態までは、問題なくページを作れています。
しかし、色々試してはみたのですが、フレームに入れるとなかなかうまく行かず困っています。
どのように直せば良いでしょうか…

どうぞ宜しくお願い致します。

Aベストアンサー

このjavascriptを使って親からiframeコンテンツ内部をスクロール制御するよう
直すのは結構たいへんそうです。

私なら、iframeコンテンツのhtmlの中に、このjavascriptと、
スクロールナビゲーションリンクのタグを非表示で、そのまんま
設置しておいて、


親にも設置したナビゲーションリンクから、iframe内のナビゲーションリンク
をjavascriptで突っつきます。

Qトヨタ車オプションのアームレストについて

現在、ポルテに乗っています。
オプション後付けでアームレストを付けたのですが幅が狭いので
トヨタ車で幅の広いアームレストを探したらラクティスとシエンタのオプションがありました。
そこで、取り付け可能か?知ってる方いましたら教えてください。

Aベストアンサー

後付けオプションにしてもメーカーオプション品にしても、その車種
専用の設計になってますので、異車種だと装着不可と販売店で言われる
可能性が高いです。
同じように見えるシートも微妙に形が違ってたりする場合もあります。

トヨタのHPでポルテ・ラクティス・シエンタのアームレストを見ましたが、
微妙なところですね。

販売店に聞かれた方が確実だと思います。

Qhttp://news.com.com/ みたいなナビゲーションは?

http://news.com.com/ のサイトの上部にあるような、マウスを持っていくとその下にサブメニューがポンポンと出てくるような動きは、どのような仕組みでやっているのでしょうか?
ヒントだけでも教えてください。お願いします。

Aベストアンサー

CSS と JavaScript を組み合わせています。
(CSS や JavaScript を無効にして、動作の違いを確認。)

たぶん、CSS で要素の表示するしないを設定し、
JavaScript でそれを制御しているのでしょう。

Qトヨタ メーカーオプションナビにiPod接続

トヨタ メーカーオプションナビにiPod接続

こんにちは。
トヨタのWISHを購入し、本日納車されたのですが、搭載されているトヨタのメーカーオプションナビ(販売店オプションナビではありません)は、iPodの接続に対応していないという事が分かりました。
どうにかしてiPodを使いたいのですが、ステレオミニジャックさえ付いていません。
他にはトランスミッターを使用するくらいしか接続方法が思いつかないのですが、できる限り音質を損なう事なくiPod音源を再生したいと思っています。
接続方法が他にあればアドバイスをお願いします。USB接続できる方法などあれば嬉しいです。
基本的に現在のナビを使用する前提ですが、機器の追加購入などはやむなしと考えています。

Aベストアンサー

こんにちは

サードパーティーから純正ナビ用のビデオ入力ハーネスが発売されていますので,それをつなげばiPodを再生することができます。例えばデータシステム社のVHI-T19が対応しているようです。
自動車用品店に行き「現行ウィッシュのメーカーオプションナビにビデオ入力をつけたいんだけど」と店員に相談するとすぐにこのような製品を紹介してくれると思います.
iPodのドック端子にiPodビデオケーブルをつないでこのハーネスにつなぐとiPodに入れた動画も見ることもできます.また音声だけならiPodのヘッドフォン端子と入力ハーネスを汎用のケーブルでつなぎことで聴くことができます。
操作はiPod側でやることになるのですが運転中はナビの操作ができないのでこちらの方が便利かもしれませんね。

参考URL:http://www.datasystem.co.jp/tekigou/pdf/v_harness.pdf

Qhttp://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="js/protoculous-effects-packer.js"></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>

<body>

<div style="margin:200px">

<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>

<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>

フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。

恐れ入りますがどなたかご教授頂けると幸いです

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<li...続きを読む

Aベストアンサー

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_Mail="hogehoge3@fuga.fuga";
form_data="3";
break;
default:
Kanrisya_Mail="";
form_data="";
break;
}
document.getElementById("E-mail").value=Kanrisya_Mail;
document.getElementById("内容").value=form_data;
Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム",
options:{autosize:true,topclose:true}});
document.observe('lightview:opened',function(){
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
});
}
function ajaxsend(){
var form_data={"E-mail":document.getElementById("E-mail").value,
"内容":document.getElementById("内容").value};
Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax',
options:{autosize: true,topclose:true,ajax:{parameters:form_data,}}
});
}
</script>
</body>
</html>

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_...続きを読む

Qトヨタ純正オプション品について

平成15年式のアリオンなのですが、
純正オプションのハーフレースシートカバーを探しております。

純正オプション品でも、トヨタ部品共販に行けば手に入る物なのでしょうか?
また、品番が分からなくても、部品共販に行けば調べてもらえるのでしょうか?



もう一つ質問なのですが、
特別仕様でない車に乗っていても、特別仕様車の部品を部品共販で販売してもらえるのでしょうか?
特別仕様車である証明などが必要なのかな、と思っております。

お分かりになられる方、よろしくお願い致します。

Aベストアンサー

>純正オプション品でも、トヨタ部品共販に行けば手に入る物なのでしょうか?

個人ユーザーでも直接部販に行って在庫があればその場で販売してくれます。
ただし現金のみですが・・

>また、品番が分からなくても、部品共販に行けば調べてもらえるのでしょうか?

ディーラーのように親切に調べたりしてくれません。
部販に行く前にあらかじめネットやディーラー等で品番を調べておくほうが良いと思います。
どうしても品番がわからなければ部販にも検索用のPCが置いてありますので車検証を持参して自分で調べる事は可能です。

>特別仕様でない車に乗っていても、特別仕様車の部品を部品共販で販売してもらえるのでしょうか?

全然問題ありません。
品番さえ分かれば販売してもらえます。

Qhttp://www.rapty.com/

http://www.rapty.com/

上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。

さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。

これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?

Aベストアンサー

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridge #eee; position:relative; overflow:hidden;}

#navi { list-style:none; margin:2px; padding:0; position:absolute; right:0; z-index:10; font-size:0; }
#navi li { padding:2px; padding-left:15px; }
#navi li.active { background-color:#f44; }
#navi li a { display:block; text-decoration:none; }
#navi li img { width:200px; height:70px; _height:69px; border:0; }

#content { list-style:none; margin:0; padding:0; position:relative; }
#content li { position:absolute; width:780px; height:300px; display:none; overflow:hidden; background-color:#cfe;}
#content li a { display:block; width:100%; height:100%; text-decoration:none; color:#000; }
#content li.active { display:block; }

li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; }
</style>
</head>
<body>
<div id="wrapper">
<ul id="navi">
<li class="active"><a href="test1.html"><img src="A.jpg" alt="#"></a></li>
<li><a href="test2.html"><img src="B.jpg" alt="#"></a></li>
<li><a href="test3.html"><img src="C.jpg" alt="#"></a></li>
<li><a href="test4.html"><img src="D.jpg" alt="#"></a></li>
</ul>
<ul id="content">
<li id="mask"></li>
<li class="active">
<a href="test1.html">
content1
<br>ここは画像1枚でもいいし、
<br><strong>文章でもいい。</strong>
<br>ただし、はみ出しても表示されない。
<br><img src="E.jpg" alt="picture" style="margin-top:150px;">
</a>
</li>
<li>
<a href="test2.html">content2</a>
</li>
<li>
<a href="test3.html">content3</a>
</li>
<li>
<a href="test4.html">content4</a>
</li>
</ul>
</div>

<script type="text/javascript">
<!--
(function() {
var u = document.getElementById('navi');
var mask = document.getElementById('mask');
var navs = document.getElementById('navi').getElementsByTagName('LI');
var cnts = document.getElementById('content').getElementsByTagName('LI');
var grovalTid, maskTid, duration = 5000;
try { u.addEventListener("mouseover", func, false);
} catch(e) { u.attachEvent("onmouseover", func); }
grovalTid = setTimeout(change, duration);

function func(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'IMG') return;
while (t.nodeName != 'LI') t = t.parentNode;
if (modeSet(t, 0)) return;
fadeIn(t);
}

function fadeIn(e) {
var i, k;
clearTimeout(grovalTid);
if (maskTid) clearInterval(maskTid);
maskTid = setInterval(fade(), 40);
for (i=0; i<navs.length; i++) {
k = e==navs[i]?1:-1;
modeSet(navs[i], k);
if (cnts[i+1]) modeSet(cnts[i+1], k);
}
}

function fade() {
var o = 95;
setOpacity(mask, o);
mask.style.display = 'block';
return function() {
o -= 5;
o = Math.max(o, 0);
setOpacity(mask, o);
if (o > 0) return;
clearInterval(maskTid); maskTid = null;
mask.style.display = 'none';
grovalTid = setTimeout(change, duration);
}
}

function change() {
for (var i=0; i<navs.length; i++) if (modeSet(navs[i], 0)) break;
fadeIn(navs[++i % navs.length]);
}

function modeSet(e, n) {
if (n>0) { e.className += ' active';
} else if (n==0) { return e.className.match(/(^|\s)active$/);
} else { e.className = e.className.replace(/(^|\s)active$/, ''); }
}

function setOpacity(e, o) {
e.style.filter = 'alpha(opacity=' + o + ')';
e.style.opacity = o / 100;
}
})();
//-->
</script>
</body>
</html>

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridg...続きを読む

QトヨタディーラーオプションのナビNHDN-W55Gの拡張性能

トヨタディーラーオプションのナビNHDN-W55Gの拡張性能
について教えてほしいです。
将来的にはアンプ積んだりスピーカー換えたりして楽しみたいのですが不可能でしょうか?
また可能であってもカロ上位ナビなどのそれとは異質な
ものなのでしょうか?

Aベストアンサー

こんにちはm(__)m

拡張性は殆ど無いような感じですね
外部端子などの情報が資料に一切記載されていません
松下電器産業製造ですが
このナビは単体使用(オプション追加程度)専用でしょう

基本的に今後の拡張性を考えるなら
純正部品は使用しない事です
拡張性が0とは言いませんが
どこかしらで制限が出てきます

まぁ普通に4chのスピーカー接続なので
その端子を使ってサブウーファーを追加したりする
程度は大丈夫だとは思いますが
その機種も限られるのではないでしょうか

広い意味での拡張性を考えるなら
最初からオーディオブランドの商品を取り付けた方が良いですね

スピーカーは付け替えるだけですので
特に問題にはなりません

今後追加があるようでしたら
(追加を考えるのだったら)
買わなくてもどのように拡張していきたいのか
それを頭の中に描いて
どのブランドでどんな商品を使えば良いのか
そういう事を考えないと
イザって時にプロでも手を拱いてしまう事があります
”何でこんな組み合わせをしたんだ?”って事です

特に”オーディオを組む”という事は
電源から始まってアンプやヘッドユニットの相性や
クロスオーバーの設定
更にスピーカーの取り付け配置
ハーネスの取り回しなど
色々な部分で専門知識が必要です

これらが容易に出来るようにするには
最初からそういう系統のオーディオを購入された方が正解という事です

こんにちはm(__)m

拡張性は殆ど無いような感じですね
外部端子などの情報が資料に一切記載されていません
松下電器産業製造ですが
このナビは単体使用(オプション追加程度)専用でしょう

基本的に今後の拡張性を考えるなら
純正部品は使用しない事です
拡張性が0とは言いませんが
どこかしらで制限が出てきます

まぁ普通に4chのスピーカー接続なので
その端子を使ってサブウーファーを追加したりする
程度は大丈夫だとは思いますが
その機種も限られるのではないでしょうか

広い意味での拡...続きを読む

Qlocation.href="http://www.aaa.aa.aa"でリンクされない!?

ラジオボタンを選択して、ラジオボタンが選択物によって最後にサブミットボタンを押した時に違うリンク先へ飛ばす方法をいろいろと考えていました。

考えた末にジャバスクリプトでリンク先を違う方法に変える事にしました。

ステップ1として
サブミットが押された時点でリンクさせる方法を試みましたが同じページを読み込んでしまいます。
サンプルは下記の通りです。
location.href="http://www.aaa.aa.aa"

どうかうまくいく方法を教えて頂けないでしょうか?
お願いします。

Aベストアンサー

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function link(){
var flag = 0;
for(i=0; i<document.forms[0].address.length; i++){
if(document.forms[0].address[i].checked){
flag = 1;
window.location.href = document.forms[0].address[i].value;
}
}
if(flag == 0){
alert('ラジオボタンで行き先を指定してください。');
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio" NAME="address" VALUE="http://www.1.co.jp/">
<INPUT TYPE="radio" NAME="address" VALUE="http://www.2.co.jp/">
<INPUT TYPE="radio" NAME="address" VALUE="http://www.3.co.jp/">
<INPUT TYPE="button" onClick="link();" VALUE="ジャンプ">
</FORM>
</BODY>
</HTML>

こういうことがしたいのかな・・・。
質問の意図をハズしてしまったかも・・・。(^^;
そしたらごめんなさい。
まぁ、ご参考までに・・・(爆)

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function link(){
var flag = 0;
for(i=0; i<document.forms[0].address.length; i++){
if(document.forms[0].address[i].checked){
flag = 1;
window.location.href = document.forms[0].address[i].value;
}
}
if(flag == 0){
alert('ラジオボタンで行き先を指定してください。');
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="radio" NAME="address" VALUE="http://www.1.co.jp/">
<INPUT TYPE="radio" NAME="addres...続きを読む


人気Q&Aランキング