<a href="https://yqfile.alicdn.com/img_e5f57a2bac208689a8751afc1ac45fea.png"></a>
<b>s3Slider</b>
<b></b>
jQuery s3Slider 就是一個效果非常棒的産品展示用 Plugin ，它讓我們單純使用 HTML 就能達到如同 Flash 般的動畫效果，而且配合适當的 CSS 時，更能在展示産品呈現一流的設計感。
· 名稱： s3Slider
使用方法很簡單，首先我們要先把需要的 JavaScript 加載，也就是 jQuery 和 s3Slider 兩個檔案：
Code
<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>
<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 */
display: none; /* important */
.s3sliderImage span {
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;
top: 0;
/*
if you put
top: 0; -&gt; the box with text will be shown at the top of the image
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
});
});
效果就如同上面展示頁所呈現的，是不是很簡單呢？
<b>結論</b><b></b>
在講求開發容易又要視覺效果一流的制作 Web 方法中，使用 jQuery 似乎已經是多數人所認同的最佳解決方案。而 s3Slider 更是利用了 jQuery 強大的延展性，為我們在 Web 産品展示上加了不少分數。而且 s3Slider 隻需要簡單的 HTML 結構，更讓程式開發人員在套用程式代碼上省事不少。是以我推薦這個 Plugin 給大家，希望大家能想出更多有趣的應用。
版權
作者：靈動生活 郝憲玮
如果你認為此文章有用，請點選底端的【推薦】讓其他人也了解此文章，
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。