排列三字谜

Ga.js幻燈片解決方案

2013-12-20 17:11:17來源:渴切作者:

ga.js"鎵" 幻燈片解決方案ga取自Gallery(畫廊)的首字母。 不傻瓜,但是很簡潔靈活,最適合二次開發。

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"鎵" 效果可以做到以不變應萬變。 越是簡單靈活的特效,越是能適應更多的場合下靈活使用。(前提是:你需要有一點點的前端基礎。)

演示地址: http://download.keqie.com/projects/ga.js/

關鍵詞:幻燈片js

贊助商鏈接:

排列三字谜 透透网角球比分 网站大全黄页视频 经典老版单机麻将 混合过关 杭州按摩女联系 日本av电影迅雷网址 足彩比分直播奥客 北京十一选五走势一 网游之修罗传说黄色片段 11选5规律破译 欧洲杯足球比分直播 群主上下分红中麻将app代理 江西时时彩 雪缘园足彩胜负彩 2019上证年线 南宁沐足推拿转让合作