studio-benkei

スライドするレイヤーは、左右・上下から表示することができ、
四方向を一緒にすることもできます。
オプションで表示のタイミングを変更することができます。

s3SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ダウンロードサイト　→　s3Slider
サンプルがダウンロードできるので、cssはダウンロードしたサンプルの設定を参考にできます。

設定 ▼

            <script src="js/jquery.js" type="text/javascript"></script>
            <script src="js/s3Slider.js"type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('#slider').s3Slider({
                        timeOut: 3000
                    });
                });
            </script>
             
          

HTML ▼

          <div id="slider">
            <ul id="sliderContent">
              <li class="sliderImage"><img src="img.jpg" alt="" width="400" height="300" />
              <span class="top">テキスト</li>
            </ul>
          </div>
          

CSS ▼

            #slider {
               width: 400px; /* important to be same as image width */
               height: 300px; /* important to be same as image height */
               position: relative; /* important */
               overflow: hidden; /* important */
            }
            
            #sliderContent {
               width: 400px; /* important to be same as image width or wider */
               position: absolute; /* important */
               top: 0; /* important */
               margin-left: 0; /* important */
            }
            
            .sliderImage {
               float: left; /* important */
               position: relative; /* important */
               display: none; /* important */
            }
            
            .sliderImage span {
               position: absolute; /* important */
               left: 0;
               font: 10px/15px Arial, Helvetica, sans-serif;
               padding: 10px 13px;
               width: 374px;
               background-color: #000;
               filter: alpha(opacity=70); /* here you can set the opacity of box with text */
               -moz-opacity: 0.7; /* here you can set the opacity of box with text */
               -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
               opacity: 0.7; /* here you can set the opacity of box with text */
               color: #fff;
               display: none; /* important */
               top: 0;
            
               /*
                   if you put
                   top: 0; -> the box with text will be shown at the top of the image
                   if you put
                   bottom: 0; -> the box with text will be shown at the bottom of the image
               */
            }
            
            .clear {
               clear: both;
            } 

          

CSS ▼ テキスト表示用のポジション設定

            .top {
              top: 0;
              left: 0;
            }
            .bottom {
              bottom: 0;
                left: 0;
            }
            .left {
              top: 0;
                left: 0;
              width: 110px !important;
              height: 280px;
            }
            .right {
              right: 0;
              bottom: 0;
              width: 90px !important;
              height: 290px;
            }