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

実行結果

設置サンプル

参照：http://www.gmarwaha.com/jquery/jcarousellite/
マウスホイール対応カルーセル。スマートフォンアプリ紹介ページとかに便利ということでサンプルを作ってみました。
スクリーンショットは、iPhoneアプリの投稿顔文字ランキングを例に。
例1

マウスホイール対応。2画像ずつ移動。
prev next
例2

マウスホイール対応。1画像ずつ移動。最初の画像の場合は前ボタン、最後の画像の場合は次へボタン非表示。
prev next
設置サンプルのソース

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>設置サンプル</title>
   <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript" src="/content/lib/jquery/jquery.mousewheel-3.0.6.js"></script>
   <script type="text/javascript" src="/content/lib/jquery/jcarousellite_1.0.1.js"></script>
   <script type="text/javascript">
      $(function() {
          $(".carousel").jCarouselLite({
             mouseWheel: true,   //マウスホイール対応
              visible: 2,         //一度に表示する画像数
              scroll: 2,         // 一度にスクロールさせる数
              btnNext: ".carousel .next",   //次の画像へリンクのクラス名
              btnPrev: ".carousel .prev",   //前の画像へリンクのクラス名
              circular: true,      //最後の画像にいったら繰り返す
              afterEnd:function(a, to, btnGo){
                 console.log(a.to);
              }
          });
         $(".carousel2").jCarouselLite({
             mouseWheel: true,   //マウスホイール対応
              visible: 1,         //一度に表示する画像数
              scroll: 1,         // 一度にスクロールさせる数
            btnNext: ".iphoneUI .next",   //次の画像へリンクのクラス名
            btnPrev: ".iphoneUI .prev",   //前の画像へリンクのクラス名
            circular: false,      //最後の画像にいったら繰り返さない
              afterEnd:function(a){
                 var src=a.find("img").attr("src");
                 if(src.match(/1.gif$/)){
                    //最初
                    $(".iphoneUI").find(".prev").hide();
                 }else{
                    $(".iphoneUI").find(".prev").show();
                 }
                 if(src.match(/d.gif$/)){
                    //最後
                    $(".iphoneUI").find(".next").hide();
                 }else{
                    $(".iphoneUI").find(".next").show();
                 }
              }
          });
          $(".prev, .next").click(function(e){
             return false;
          });
      });
   </script>
   <style type="text/css">
      * { margin:0; padding:0; }
      .clear {
         clear:both;
         float:none;
      }
      body {
         font-size:12px;
         margin:20px;
         line-height:1.5;
      }
      /* demo1 */
      .carousel {
         border:1px solid #eee;
         position:relative;
         z-index:1;
         background:#eee;
         padding:5px 5px 20px 5px;
      }
      .carousel li img {
         margin:5px;
         border:1px solid #ccc;
         /* 画像の高さと幅を指定。imgタグに直接でもOK*/
         width:320px; height:480px;
      }
      .carousel .next,
      .carousel .prev {
         position:absolute;
         text-decoration:none;
         z-index:10;
         width:40px; height:20px;
         background:#ccc;
         text-align:center;
         text-decoration:none;
         color:#fff;
         line-height:20px;
         font-weight:bold;
      }
      .carousel .prev {
         bottom:0; left:0;
      }
      .carousel .next {
         bottom:0; right:0;
      }
      .carousel .next:hover,
      .carousel .prev:hover {   
         color:#999;
      }
      /* demo2 */
      .iphoneUI {
         margin:20px 100px; padding:0;
         width:380px; height:744px;
         background:url("/content/img/ajax/jCarouselLite/iphoneUI.gif") no-repeat 0 0;
         position:relative;
      }
      .iphoneUI .inner {
         position:absolute;
         top:133px; left:32px;
      }
      .carousel2 {
         position:relative;
      }
      .carousel2 li img {
         /* 画像の高さと幅を指定。imgタグに直接でもOK*/
         width:320px; height:480px;
      }
      .iphoneUI .next,
      .iphoneUI .prev {
         position:absolute;
         text-decoration:none;
         width:30px; height:30px;
         line-height:1;
         background:#ccc;
         background-repeat:no-repeat;
         text-align:center;
         text-decoration:none;
         color:#fff;
         top:350px;
         border:3px solid #fff;
         border-radius:30px;
         box-shadow:1px 1px 2px rgba(0,0,0,.33);
         background-size:100% 100%;
         text-indent:-9999px;
      }
      .iphoneUI .prev {
         left:-70px;
         background-image:url("/content/img/ajax/jCarouselLite/larr.png");
         background-position:-1px 0;
         display:none;
      }
      .iphoneUI .next {
         right:-70px;
         background-position:1px 0;
         background-image:url("/content/img/ajax/jCarouselLite/rarr.png");
      }
      .iphoneUI .prev:hover,
      .iphoneUI .next:hover {
         background-color:#999;
      }
   </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>
   <h2>設置サンプル</h2>
   <p>
      参照：<a href="http://www.gmarwaha.com/jquery/jcarousellite/">http://www.gmarwaha.com/jquery/jcarousellite/</a>
   </p>
   <p>
      マウスホイール対応カルーセル。
      スマートフォンアプリ紹介ページとかに便利ということでサンプルを作ってみました。
   </p>
   <p>
      スクリーンショットは、iPhoneアプリの投稿顔文字ランキングを例に。
   </p>
   <h2>例1</h2>
   <p>
      マウスホイール対応。2画像ずつ移動。
   </p>
   <div class="carousel">
       <div class="jCarouselLite">
           <ul>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/1.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/2.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/3.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/4.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/5.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/6.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/7.gif" alt=""></li>
               <li><img src="/content/img/ajax/jCarouselLite/kaomoji/8.gif" alt=""></li>
               <li><a href="http://itunes.apple.com/jp/app/tou-gao-yan-wen-zirankingu/id463397728?mt=8" target="_blank"><img src="/content/img/ajax/jCarouselLite/kaomoji/d.gif" alt=""></a></li>
           </ul>
       </div>
       <a href="#" class="prev">prev</a>
       <a href="#" class="next">next</a>
       <div class="clear"></div>
   </div>
   <h2>例2</h2>
   <p>
      マウスホイール対応。1画像ずつ移動。
      最初の画像の場合は前ボタン、最後の画像の場合は次へボタン非表示。
   </p>
   <div class="iphoneUI">
      <div class="inner">
         <div class="carousel2">
             <div class="jCarouselLite">
                 <ul>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/1.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/2.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/3.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/4.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/5.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/6.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/7.gif" alt=""></li>
                     <li><img src="/content/img/ajax/jCarouselLite/kaomoji/8.gif" alt=""></li>
                     <li><a href="http://itunes.apple.com/jp/app/tou-gao-yan-wen-zirankingu/id463397728?mt=8" target="_blank"><img src="/content/img/ajax/jCarouselLite/kaomoji/d.gif" alt=""></a></li>
                 </ul>
             </div>
             <div class="clear"></div>
         </div>
      </div>
       <a href="#" class="prev">prev</a>
       <a href="#" class="next">next</a>
   </div>
</body>
</html>