JavaScript + Ajax 実践サンプル集 - イメージを水平方向にスクロール

イメージを水平方向にスクロール

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのjcarousel()プラグインを利用してイメージを水平方向にスクロールします。サンプルが表示されたら左右に矢印キーをクリックしてスクロールします。

$('#mycarousel').jcarousel();     

<ul id="mycarousel" class="jcarousel-skin-tango">
  <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" 
    width="75" height="75" alt="" /></li>
</ul>

<!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>
  <title>jQuery - jCarousel Horizontal </title>
  <link href="jQuery/jCarousel/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/lib/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jCarousel/lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
  <script src="jQuery/jCarousel/lib/jquery.jcarousel.pack.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    $(function() {

$('#mycarousel').jcarousel();  
    
    });
  </script>

</head>
<body>

</div>

</body>
</html>

HEAD部BODY部

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/jCarousel/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/lib/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jCarousel/lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
  <script src="jQuery/jCarousel/lib/jquery.jcarousel.pack.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    $(function() {

      $('#mycarousel').jcarousel();  
    
    });
  </script>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

イメージを水平方向にスクロール

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

イメージを水平方向にスクロール

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!