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。

沒有留言:

張貼留言