ボックス内のコンテンツを自動送りできるタブ/コンテンツ表示/SolidStateEveryday

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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>Example</title>
<link rel="stylesheet" type="text/css" href="slider.css" />
<script type="text/javascript" src="slider.js"></script>
</head>
<body>
  <h2>Section Scroller - <span class="link" onmousedown="slideContent('section-1')">One</span> | <span class="link" onmousedown="slideContent('section-2')">Two</span> | <span class="link" onmousedown="slideContent('section-3')">Three</span> - <span class="link" onmouseover="scrollContent('slider',-1)" onmouseout="cancelScroll('slider')">Up</span> | <span class="link" onmouseover="scrollContent('slider',1)" onmouseout="cancelScroll('slider')">Down</span></h2>
  <div class="slider">
    <div class="slidercontent" id="slider">
      <div id="section-1" class="section upper">
        <strong>Content One:</strong> Yoga is a science. That is the second thing to grasp. <br />
Yoga is a science, and not a vague, dreamy drifting or imagining.<br />
It is an applied science, a systematized collection of laws applied to bring about a definite end.<br />It takes up the laws of psychology, applicable to the unfolding of the whole consciousness of man on every plane,<br />
in every world, and applies those rationally in a particular case. <br />
This rational application of the laws of unfolding consciousness acts exactly .

      </div>
      <div id="section-2" class="section upper">
        <strong>Content Two:</strong> Yoga is a science. That is the second thing to grasp. <br />
Yoga is a science, and not a vague, dreamy drifting or imagining.<br />
It is an applied science, a systematized collection of laws applied to bring about a definite end.<br />It takes up the laws of psychology, applicable to the unfolding of the whole consciousness of man on every plane,<br />
in every world, and applies those rationally in a particular case. <br />
This rational application of the laws of unfolding consciousness acts exactly .
      </div>
      <div id="section-3" class="section">
        <strong>Content Three:</strong> Yoga is a science. That is the second thing to grasp. <br />
Yoga is a science, and not a vague, dreamy drifting or imagining.<br />
It is an applied science, a systematized collection of laws applied to bring about a definite end.<br />It takes up the laws of psychology, applicable to the unfolding of the whole consciousness of man on every plane,<br />
in every world, and applies those rationally in a particular case. <br />
This rational application of the laws of unfolding consciousness acts exactly .
      </div>
    </div>
  </div>


</body>
</html>

	Ultimate JavaScript Slider and Scroller - Web Development Blog

ボックス内のコンテンツをメニュー形式でスライドさせたり、自動スライドさせたりすることが出来るスクリプト。
ライブラリに依存しておらず、デザインはCSSで設定することが出来ます。
トリガーとなるメニュー部分にアクションを書き込んで動作させます。

セッティング

１．ダウンロード/セッティング

サイトへ行き contentslider.zip をダウンロードしてください。
解凍したら slider.js と　slider.css をアップロードします。

２．<head>設定

アップしたスクリプトとCSSファイルを読み込ませます。

パスに注意して記述してください。

３．HTMLマークアップ

まずメニュー部分

<span class="link" onmousedown="slideContent('section-1')">One</span>
<span class="link" onmousedown="slideContent('section-2')">Two</span>
<span class="link" onmousedown="slideContent('section-3')">Three</span>　

これはクリックして該当IDの箇所までスライドする為のメニューです。
オレンジ色のところがそのID名ですね。
次に自動スライドするメニューですが、

このように記述します。

コンテンツの表示部分は、

まず上記のように範囲を記述します。
次にその内部に、

<div class="slider">
   <div class="slidercontent" id="slider">
　　　　 <div id="section-1" class="section upper">ココにコンテンツ記述</div>
   <div id="section-2" class="section upper">ココにコンテンツ記述</div>
   <div id="section-3" class="section upper">ココにコンテンツ記述</div>
   </div>
</div>　

といった具合にボックスを記述していけばOKです。
その際はメニュー部分で予め設定しておいたID名を付けることを忘れないように注意してください。