挑戰jquery（一）實現水平投影片，jquery投影片

挑戰jquery（一）實現水平投影片，jquery投影片

今天上部落格看到了這個挑戰題目，說來慚愧，半天才把頁面做出來，js部分就是一頭霧水了
網址：http://www.gbtags.com/gb/gbliblist/99.htm
如有侵權請聯絡我
有興趣的可以自己去試試，
頁面是這樣的：

點擊上一個或者下一個會水平滑動到下一張圖片從而實現投影片效果

下面把代碼貼出來：

html部分：

<!-- 幻燈相關HTML //--><div class="slider">  <ul>    <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags1.jpg" alt="image"></li>    <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags2.jpg" alt="image"></li>    <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags3.jpg" alt="image"></li>    <li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags4.jpg" alt="image"></li>  </ul></div><div id="slider-nav">  <button data-direction="prev"> &laquo;　上一個</button>  <button data-direction="next">下一個 &raquo;</button></div><script type='text/javascript' src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>

css部分：

/*幻燈相關的CSS*/* {    margin:0;    padding:0;}body {    width:550px;    margin:85px auto 0;    background:#f0eeee;    font-family: 'microsoft yahei',Arial,sans-serif;}nav{    padding: 20px 0px;}#slider-nav {    display:none;    margin-top:1em;    text-align:center;}#slider-nav button {    padding: 15px 30px;    font-family: 'microsoft yahei',Arial,sans-serif;}.slider {    height:200px;    overflow:scroll;    -webkit-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);    -moz-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);    box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);}.slider ul {    width:10000px;    list-style:none;}.slider li {    float:left;}

js部分：

/*產生幻燈效果的Javascript*/function Slider( container, nav ) {    this.container = container;    this.nav = nav.show();    this.imgs = this.container.find('img');    this.imgWidth = this.imgs[0].width;    this.imgsLen = this.imgs.length;    this.current = 0;}Slider.prototype.transition = function( ) {    this.container.animate({        'margin-left': -( this.current * this.imgWidth )    });};Slider.prototype.setCurrent = function( dir ) {    var pos = this.current;    pos += ( ~~( dir === 'next' ) || -1 );    this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;    return pos;};$(function(){    var container = $('.slider').css('overflow', 'hidden').children('ul'),        slider = new Slider( container, $('#slider-nav') );    slider.nav.find('button').on('click', function() {        slider.setCurrent( $(this).data('direction') );        slider.transition();    });     });