ga.js"鎵" 幻燈片解決方案ga取自Gallery(畫廊)的首字母。 不傻瓜,但是很簡潔靈活,最適合二次開發(fā)。
一個幻燈片的基本html結(jié)構(gòu)(簡潔到不能在縮減的,最簡寫法)
<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"鎵" 效果可以做到以不變應(yīng)萬變。 越是簡單靈活的特效,越是能適應(yīng)更多的場合下靈活使用。(前提是:你需要有一點點的前端基礎(chǔ)。)