【Google Site】html小工具-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>
<span class="button right-button">下一頁</span>
</div>
</div>
這樣就大功告成啦~
hmtl小工具可以從其他地方引入javascript和css style這個實驗目前還在進行中，根據官方說明文件目前僅支援jquery1.5-1.6版本，所以比較老舊的jquery工具沒有辦法直接用htmlbox做出來，只好再等等google site團隊囉
demo 精進教學計劃-媒體素養競賽
download
