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ランキング