PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照:jCarousel Lite

設置サンプルのソース

<!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" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>設置サンプル</title>
      <link href="/content/lib/global.css" rel="stylesheet" type="text/css" />
      <!-- JS -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jcarousellite_1.0.1.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
      <script type="text/javascript">
         $(function() {
             $(".main .jCarouselLite").jCarouselLite({
                 btnNext: ".next",
                 btnPrev: ".prev"
             });
         });
      </script>
      <style type="text/css">
         #jCarouselLiteDemo .carousel  {
            padding:10px 0 0 0;
            margin:0 0 20px 10px;
            position:relative;
         }
         #jCarouselLiteDemo .digg {
            position:absolute;
            left:610px; top:110px;
         }
         #jCarouselLiteDemo .main {
            margin-left:40px;
         }
         #jCarouselLiteDemo .demo em {
            color:#ff3300;
            font-weight:bold;
            font-size:60%;
            font-style:normal;
         }
         #jCarouselLiteDemo .carousel button { /*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
            float:left;
         }              
         #jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {
            display:block;
            float:left;
            width:30px; height:105px;
            text-decoration:none;
            background:url("/content/img/ajax/jcarousel_lite/imageNavLeft.gif") left center no-repeat;
         }
         #jCarouselLiteDemo .carousel a.next {
            background:url("/content/img/ajax/jcarousel_lite/imageNavRight.gif") right center no-repeat;
         }
         #jCarouselLiteDemo .carousel a.next:hover {
            background-image:url("/content/img/ajax/jcarousel_lite/imageNavRightHover.gif");
         }
         #jCarouselLiteDemo .carousel a.prev:hover {
            background-image:url("/content/img/ajax/jcarousel_lite/imageNavLeftHover.gif");
         }    
         #jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active {
            border:none;
            outline:none;
         }
         #jCarouselLiteDemo .carousel .jCarouselLite {
            border:1px solid black;
            float:left;
            _padding-right:10px;
            _height:115px;
            background-color:#dfdfdf;
            position:relative;
            visibility:hidden;
            left:-5000px;
         }
         #jCarouselLiteDemo .carousel ul {
            overflow:hidden;
            margin:0; padding:0;
         }
         #jCarouselLiteDemo .carousel li img {
            background-color:#fff;
            width:75px; height:75px;
            _width:85px; _height:85px;
            list-style:none;
            margin:0; padding:5px;
            overflow;hidden;
         }
         #jCarouselLiteDemo .carousel li {
            background-color:#fff;
            width:85px; height:85px;
            _width:95px; _height:95px;
            list-style:none;
            margin:5px; padding:0;
            _margin:10px 5px;
         }
         #jCarouselLiteDemo .widget img {
            cursor:pointer;
         }
         #jCarouselLiteDemo .mid {
            margin-left:80px;
            width:400px; height:300px;
         }
         #jCarouselLiteDemo .vertical {
            margin-left:170px;
         }
         #jCarouselLiteDemo .vertical .jCarouselLite {   /* so that in IE 6, the carousel div doesnt expand to fill the space */
            width:170px;
         }
         #jCarouselLiteDemo .imageSlider li img, 
         #jCarouselLiteDemo .imageSlider li p, 
         #jCarouselLiteDemo .imageSliderExt li img , 
         #jCarouselLiteDemo .imageSliderExt li p {
            width:400px; height:300px;
         }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <p>参照:<a href='http://www.gmarwaha.com/jquery/jcarousellite/'>jCarousel Lite</a></p>
<!-- CODE -->
         <div id="jCarouselLiteDemo" class="cf">
              <div class="carousel main">
                  <a href="#" class="prev">&nbsp</a>
                  <div class="jCarouselLite">
                      <ul>
                          <li><img src="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_m.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3159/2971755812_cb4dc9e097_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3247/3053382326_d457fa52ee_s.jpg" alt="" width="75" height="75" /></li>
                          <li><img src="http://farm4.static.flickr.com/3045/3053382294_07b552d467_s.jpg" alt="" width="75" height="75" /></li>
                      </ul>
                  </div>
                  <a href="#" class="next">&nbsp</a>
                  <div class="clear"></div>
              </div>
           </div><!-- #jCarouselLiteDemo -->
<!-- / CODE -->
      </div>
   </body>
</html>