*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年6月23日 星期一

一直按圖就一直換圖:簡單直覺的做法



【自製】
一直按圖一直換圖 image gallery


  看著貓的各種姿式,是一種 恬靜的樂趣。圖多 ↑ 。
Click & See More!



一、請在欲編輯區用KompoZer置入 一張圖,並設定長寬:



注意事項:
  1. 編輯區所置入之圖片要記得設id,如本例id="i001"。

二、請置入下列互動程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var arr = [
"第一張照片網址",
"第二張照片網址",
"第三張照片網址",
"第四張照片網址",
"第五張照片網址"
];
var flag = 1;
$("#i001").click(function() {
if(flag < arr.length){
$(this).attr("src",
arr[flag]);
flag = flag+1;
}
else {
flag= 0;
$(this).attr("src",
arr[flag]);
flag = flag+1;
}
});
});
</script>

注意事項:
  1. 要記得把步驟一所設定的id代碼,寫入此互動程式中,即紅色字體部 分。
  2. 把更多的照片網址寫人到藍色字體部 分,如不夠可以再自行添加,請看教學影音詳細說明。

三、教學影音注意事項:

  1. 如有其他互動程式已用到jquery-1.9.1.js這條,即橘色字體部分,請刪掉。一篇文章只要使用一次,請保留最早出現的那 一次。
  2. 如要再做第二個,請重覆一、二,並重新設定id。


沒有留言:

張貼留言