【Google Site】html小工具-s3Slider

又一款可以相容GoogleSite的jquery Slider囉~這一次是可以輪播圖片和加上簡短文字和標題的s3Slider。不同於之前googlesite內建的翻頁content sliders3Slider提供了自動輪播圖片的功能,對於在GoogleSite網站頂端展示圖片來說,相當實用美觀。
demo - 實驗所-s3Slider

同樣的分<style> <script>和<html>三個部分。

<style>
 <style>  
 #slider {  
   width: 1000px; /* important to be same as image width */  
   height: 400px; /* important to be same as image height */  
   position: relative; /* important */  
  overflow: hidden; /* important */  
 }  
 #sliderContent {  
   width: 1020px; /* important to be same as image width or wider */  
   position: absolute;  
  top: 0;  
  margin-left: 0;  
 }  
 .sliderImage {  
   float: left;  
   position: relative;  
  display: none;  
 }  
 .sliderImage span {  
   position: absolute;  
  font: 10px/15px Arial, Helvetica, sans-serif;  
   padding: 10px 13px;  
   width: 384px;  
   background-color: #000;  
   filter: alpha(opacity=70);  
   -moz-opacity: 0.7;  
  -khtml-opacity: 0.7;  
   opacity: 0.7;  
   color: #fff;  
   display: none;  
 }  
 .clear {  
  clear: both;  
 }  
 .sliderImage span strong {  
   font-size: 14px;  
 }  
 .top {  
  top: 0;  
  left: 0;  
 }  
 .bottom {  
  bottom: 0;  
   left: 0;  
 }  
 ul { list-style-type: none;}  
 </style>  

 <script>部分
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
 <script type="text/javascript" >  
 (function($){   
   $.fn.s3Slider = function(vars) {      
     var element   = this;  
     var timeOut   = (vars.timeOut != undefined) ? vars.timeOut : 4000;  
     var current   = null;  
     var timeOutFn  = null;  
     var faderStat  = true;  
     var mOver    = false;  
     var items    = $("#" + element[0].id + "Content ." + element[0].id + "Image");  
     var itemsSpan  = $("#" + element[0].id + "Content ." + element[0].id + "Image span");  
     items.each(function(i) {  
       $(items[i]).mouseover(function() {  
         mOver = true;  
       });  
       $(items[i]).mouseout(function() {  
         mOver  = false;  
         fadeElement(true);  
       });  
     });  
     var fadeElement = function(isMouseOut) {  
       var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;  
       thisTimeOut = (faderStat) ? 10 : thisTimeOut;  
       if(items.length > 0) {  
         timeOutFn = setTimeout(makeSlider, thisTimeOut);  
       } else {  
         console.log("Poof..");  
       }  
     }  
     var makeSlider = function() {  
       current = (current != null) ? current : items[(items.length-1)];  
       var currNo   = jQuery.inArray(current, items) + 1  
       currNo = (currNo == items.length) ? 0 : (currNo - 1);  
       var newMargin  = $(element).width() * currNo;  
       if(faderStat == true) {  
         if(!mOver) {  
           $(items[currNo]).fadeIn((timeOut/6), function() {  
             if($(itemsSpan[currNo]).css('bottom') == 0) {  
               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {  
                 faderStat = false;  
                 current = items[currNo];  
                 if(!mOver) {  
                   fadeElement(false);  
                 }  
               });  
             } else {  
               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {  
                 faderStat = false;  
                 current = items[currNo];  
                 if(!mOver) {  
                   fadeElement(false);  
                 }  
               });  
             }  
           });  
         }  
       } else {  
         if(!mOver) {  
           if($(itemsSpan[currNo]).css('bottom') == 0) {  
             $(itemsSpan[currNo]).slideDown((timeOut/6), function() {  
               $(items[currNo]).fadeOut((timeOut/6), function() {  
                 faderStat = true;  
                 current = items[(currNo+1)];  
                 if(!mOver) {  
                   fadeElement(false);  
                 }  
               });  
             });  
           } else {  
             $(itemsSpan[currNo]).slideUp((timeOut/6), function() {  
             $(items[currNo]).fadeOut((timeOut/6), function() {  
                 faderStat = true;  
                 current = items[(currNo+1)];  
                 if(!mOver) {  
                   fadeElement(false);  
                 }  
               });  
             });  
           }  
         }  
       }  
     }  
     makeSlider();  
   };   
 })(jQuery);   
 </script>  
 <script type="text/javascript">  
   $(document).ready(function() {  
     $('#slider').s3Slider({  
       timeOut: 3000  
     });  
   });  
 </script>  

最後是<div>部分
  <div id="slider">  
     <ul id="sliderContent">  
       <li class="sliderImage">  
         <a href=""><img src="" alt="1" /></a>  
         <span class="top"><strong>Title text 1</strong><br />Content text...</span>  
       </li>  
       <li class="sliderImage">  
         <a href=""><img src="" alt="2" /></a>  
         <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>  
       </li>  
       <li class="sliderImage">  
         <img src="" alt="3" />  
         <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>  
       </li>  
       <li class="sliderImage">  
         <img src="" alt="4" />  
         <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>  
       </li>  
       <li class="sliderImage">  
         <img src="" alt="5" />  
         <span class="top"><strong>Title text 2</strong><br />Content text...</span>  
       </li>  
       <div class="clear sliderImage"></div>  
     </ul>  
   </div>  

如果對於其他GoogleSite相容的jquery slider有興趣的看官,可以參考之前已經成功使用的htmlBox說明。
【Google Site】html小工具-content slider【Google Site】用html小工具做出marqueer效果
如果還想深入研究一下s3Slider,可以參考一下作者的原創版本s3slider-original,相信可以收穫更多唷
html小工具-s3Slider下載↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

這個網誌中的熱門文章

【Google Site】用html小工具做出marqueer效果