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"镓" 效果可以做到以不变应万变。 越是简单灵活的特效，越是能适应更多的场合下灵活使用。（前提是：你需要有一点点的前端基础。）