網站首頁沒有一點動畫怎么可以，我以前用過Flash As3做過圖片切換，效果非常不錯，可是麻煩，改變起來麻煩。一直都想自己做個圖片切換效果，總認為比較麻煩，今天自己實踐了一下，其實還比較簡單。不過有個小問題，IE8不兼容模式下 設置有透明效果的div 樣式添加失效了，但是我用谷歌，IE8兼容測試都ok。
<script type="text/javascript">
var picCurrent = 1;
var picTotal = 8;
var interval; //自動運行
function picChange(current) {
//停止當前動畫
if ($("#divImg").is(":animated")) { $("#divImg").stop(); }
picCurrent = current;
//為當前選擇的設置樣式
$("#divLink").find("a").removeClass("picselect")
$("#divLink").find("a[title='" + picCurrent + "']").addClass("picselect");
//設置下面的圖片說明
var remark = "<a href=/"images/pic" + picCurrent + ".jpg/">";
switch (picCurrent) {
case 1: remark += " 菊花〔拉丁學名：Dendranthema morifolium（Ramat. ）Tzvel.〕，常用chrysanthemum。菊花是菊科，菊屬多年生草本... "; break;
default: remark += picCurrent + "測試說明"; break;
}
remark += "</a>";
$("#picremark").html(remark);
//運行動畫
$("#divImg").animate({ left: -((picCurrent - 1) * 1000) + "px" }, "1000");
return false;
}
//暫不需使用
function PicPer() {
if (picCurrent > 1) {
picCurrent--;
}
else {
picCurrent = picTotal;
}
picChange(picCurrent);
}
//下一張
function PicNext() {
if (picCurrent == picTotal) {
picCurrent = 1
}
else {
picCurrent++;
}
picChange(picCurrent);
}
//自動切換圖片
function PicRun(functionName) {
picChange(1);
interval = setInterval(PicNext, "3000");
}
$(document).ready(function () {
PicRun();
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<title>圖片切換</title>
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<link href="picchange.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="picMain">
<div class="picimg" id="divImg">
<img src="images/pic1.jpg" class="pic" />
<img src="images/pic2.jpg" class="pic" />
<img src="images/pic3.jpg" class="pic" />
<img src="images/pic4.jpg" class="pic" />
<img src="images/pic5.jpg" class="pic" />
<img src="images/pic6.jpg" class="pic" />
<img src="images/pic7.jpg" class="pic" />
<img src="images/pic8.jpg" class="pic" />
</div>
<div class="picaction" id="divLink">
<a href="images/pic8.jpg" title="8" onclick=" return picChange(8)" class="">8</a> <a href="images/pic7.jpg" title="7" onclick=" return picChange(7)">7</a> <a href="images/pic6.jpg" title="6"
onclick=" return picChange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picChange(5)">
5</a> <a href="images/pic4.jpg" title="4" onclick=" return picChange(4)">4</a>
<a href="images/pic3.jpg" title="3" onclick=" return picChange(3)">3</a> <a href="images/pic2.jpg"
title="2" onclick=" return picChange(2)">2</a> <a href="images/pic1.jpg" title="1"
onclick=" return picChange(1)" class="">1</a>
</div>
<div id="picremark" class="picRemark">
測試介紹文件了啊</div>
</div>
</body>
</html>
