ga.js"鎵" 幻燈片解決方案ga取自Gallery（畫廊）的首字母。 不傻瓜，但是很簡潔靈活，最適合二次開發。
一個幻燈片的基本html結構（簡潔到不能在縮減的，最簡寫法）
<div class="ga">
<div class="prev">
</div>
<div class="inner">
<ul>
<li><a href="#"><img src="img.jpg" /></a></li>
<li><a href="#"><img src="img.jpg" /></a></li>
<li><a href="#"><img src="img.jpg" /></a></li>
</ul>
</div>
<div class="next"></div>
</div>
css樣式代碼
.ga{
border:#ccc solid 1px; padding:20px 30px; width:480px; height:auto; overflow:hidden;
margin:50px auto 50px auto; background:#fff;
}
.ga .prev , .ga .next{
width:50px; background:url(prev.gif) no-repeat center; float:left; display:inline;
height:250px; cursor:pointer;
}
.ga .next{
background:url(next.gif) no-repeat center;
}
.ga .inner{
width:380px; overflow:hidden; float:left; display:inline;
}
.ga ul{
width:5000px; height:auto; overflow:hidden;
}
.ga ul li{
width:380px; float:left; display:inline; text-align:center;
}
js代碼
$(function(){
$.extend({
autoChange:function(){
$('.ga ul').animate({'marginLeft':-380},function(){
$(this).css('marginLeft',0).find('li:first').appendTo($(this));
});
}
})
//_interval = setInterval("$.autoChange()",3000);
$('.ga .prev').click(function(){
$('.ga ul').animate({'marginLeft':-380},function(){
$(this).css('marginLeft',0).find('li:first').appendTo($(this));
});
},
function(){});
$('.ga .next').click(function(){
$('.ga ul').css('marginLeft',-380).find('li:last').prependTo($('.ga ul'));
$('.ga ul').animate({'marginLeft':0});
},
function(){})
})
授人魚不如授人以魚，ga.js"鎵" 效果可以做到以不變應萬變。 越是簡單靈活的特效，越是能適應更多的場合下靈活使用。（前提是：你需要有一點點的前端基礎。）