【Google Site】html小工具-content slider

這篇不太算是新聞,但是終於有適當的地方可以做出一個demo還是很高興,關於htmlbox可以參考【Google Site】用html小工具做出marqueer效果,總而言之htmlbox的出現免去了從外部引進iframe造成的困擾。而今天則是利用google說明文件做出了一個簡單的content slider~
Content Slider先前看過比較好上手的應該要算是Ennui Design,上面的demo網站就提供了相關設定的說明,進入css做出修改就可以符合自己的需求,像是海洋教育網站的content slider就是根據Ennui Design做出來的。有興趣的讀者可以去Ennui Design看看。不過Ennui Design這款目前在googlesite上僅能使用iframe從外面掛載,還不能直接寫入。

呼,說了這麼多來進入今天的主題吧~
在htmlbox裡面,要包含<style> <script>和<html>三個部分。一般content slider從外部引入,下面的範例中htmlbox裡的<style> <script>則把引入的部分直接寫進來。
<script>部分是引入jquery 1.5版本
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"> </script>  
 <script>  
  var current_slide = 0; // zero-based  
  var slide_count = 4;  
  var slide_size = 960;  
  var Direction = {  
   LEFT: -1,  
   RIGHT: 1  
  };  
  /**  
   * Moves to the next slide using the direction (dx) parameter.  
   */  
  var nextSlide = function(dx) {  
   current_slide = (current_slide + slide_count + dx) % slide_count;  
   // Calculate the new value for css 'left' property and animate.  
   var left_offset = '-' + (current_slide * slide_size) + 'px';  
   $('.items').animate({'left': left_offset}, 800);  
  };  
  $('.right-button').click(nextSlide.bind(null, Direction.RIGHT));  
  $('.left-button').click(nextSlide.bind(null, Direction.LEFT));  
  $('.carousel').show();  
 </script>  

<style>部分則是設定了外框、全部物件、單一物件、導覽和按鍵。
 <style>  
  .carousel {  
   width: 960px;  
   height: 330px;  
   position: relative;  
   overflow: hidden;  
   background-color:white;  
   border-radius: 20px;  
   -moz-border-radius: 20px;  
   -webkit-border-radius: 20px;  
  }  
  .items {  
   width: 3840px;  
   position: absolute;  
  }  
  .items > div {  
   width: 960px;  
   height: 310px;  
   display: table-cell;  
   vertical-align: middle;  
  }  
  .nav {  
   position: absolute;  
   bottom: 5px;  
   right: 15px;  
  }  
  .button {  
   cursor: pointer;  
  }  
 </style>  

最後<html>再把想要呈現的內容填進來~
 <div class="carousel" style="display:none;">  
  <div class="items">  
   <div>  
    page1  
   </div>  
   <div>  
    page2  
   </div>  
   <div>  
    page3  
   </div>  
   <div>  
    page4  
   </div>  
  <div class="nav">  
   <span class="button left-button">上一頁</span>  
   &nbsp;&nbsp;  
   <span class="button right-button">下一頁</span>  
  </div>  
 </div>  

這樣就大功告成啦~
hmtl小工具可以從其他地方引入javascript和css style這個實驗目前還在進行中,根據官方說明文件目前僅支援jquery1.5-1.6版本,所以比較老舊的jquery工具沒有辦法直接用htmlbox做出來,只好再等等google site團隊囉

demo 精進教學計劃-媒體素養競賽
download

這個網誌中的熱門文章

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