Ga.js幻灯片解决方案

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