[jQuery Plugin] s3Slider - 效果炫麗的產品展示

分類: jQuery|技術分享 作者: jaceju

31 3 月 2009

s3slider_example

緣起

由於本公司主要的客戶群都是 EC 網站,因此在商品的呈現上就會非常多元化。大部份的產品展示網頁在視覺呈現上都會被要求要有一定的水準,如果是需要特別的動態效悲果,那幾乎就是 Flash 的天下了。

然而在產品不斷翻新的網站,採用 Flash 來製作產品頁就顯得耗時與費工,更別說成本有多麼高了;就算我們可以用參數化的方式來讓載入產品資訊以解決過多 Flash 的問題,但一般視覺設計師所製作的 Flash 對 SEO 的支援度也相當糟糕,對產品的能見度也大打折扣。

s3Slider

jQuery s3Slider 就是一個效果非常棒的產品展示用 Plugin ,它讓我們單純使用 HTML 就能達到如同 Flash 般的動畫效果,而且配合適當的 CSS 時,更能在展示產品呈現一流的設計感。

使用方法很簡單,首先我們要先把需要的 JavaScript 載入,也就是 jQuery 和 s3Slider 兩個檔案:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

接下來就是簡單的 HTML 頁面,基本格式如下:

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
              <img src="#" />
           <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
              <img src="#" />
           <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

套用 s3Slider 效果的元素 ID 為會被當作內含元素其 id 或 class 的前置字串;例如 div#s3slider ,裡面的 ul 和 li 其 id 及 class 名稱就要以 s3slider 開頭,然後要再加上 Content 和 Image 等關鍵字。

接下來是 CSS 的部份,你可以調整成你喜歡的格式:

#s3slider { 
   width: 400px; /* important to be same as image width */ 
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}
 
#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}
 
.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}
 
.s3sliderImage 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;  -&gt; the box with text will be shown at the top of the image 
          if you put
          bottom: 0;  -&gt; the box with text will be shown at the bottom of the image
   */
}
 
.clear {
   clear: both;
}

最後,你只需要在 div#s3Slider 上套用 s3Slider Plugin 即可:

$(document).ready(function() { 
    $('#s3slider').s3Slider({ 
        timeOut: 4000 
    });
});

效果就如同上面展示頁所呈現的,是不是很簡單呢?

結論

在講求開發容易又要視覺效果一流的製作 Web 方法中,使用 jQuery 似乎已經是多數人所認同的最佳解決方案。而 s3Slider 更是利用了 jQuery 強大的延展性,為我們在 Web 產品展示上加了不少分數。而且 s3Slider 只需要簡單的 HTML 結構,更讓程式開發人員在套用程式碼上省事不少。因此我推薦這個 Plugin 給大家,希望大家能想出更多有趣的應用。

1 Response to [jQuery Plugin] s3Slider - 效果炫麗的產品展示

Avatar

mark

12 月 12th, 2009 at 2:01 上午

嘿 ... 謝謝 你提供 這麼實用的 資訊

網站資訊 很棒 !!

來留言 reply 一下 !! nice work 😛 !!

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。