創建一個jQuery圖像滑塊

我想開發一個圖像滑塊使用jQuery只是爲了學習的目的。我的代碼工作正常，但是當我到達最後一張幻燈片時，它的作品非常尷尬，我只希望用戶在第一張幻燈片上點擊下一個按鈕，然後用戶跳轉到第一張幻燈片。請檢查給定鏈路，並請幫我...創建一個jQuery圖像滑塊

LINK

HTML

<div id="wrapper"> 
    <div class="slider_cont"> 
     <ul> 
      <li>first slide</li> 
      <li>second slide</li> 
      <li>third slide</li> 
      <li>fourth slide</li> 
     </ul> 
    </div> 

    <div class="button"> 
     <button data-dir="prev">pev</button> 
     <button data-dir="next">next</button> 
    </div> 
</div>

CSS

body{margin:0; padding:0;} 
*{margin:0; padding:0;} 
#wrapper{width:300px; margin:0 auto; padding:100px 0 0;} 
.slider_cont{width:300px; height:100px; overflow:hidden; position:relative;} 
.slider_cont ul{width:10000px; position:absolute;} 
.slider_cont ul li{ list-style:none; float:left; width:300px; height:100px; text-align:center; color:#fff; background:#ccc;} 

.button{padding:30px 0 0;} 
.button button{padding:10px; margin:0 20px 0 0;}

SCRIPT

var imageWidth = $('.slider_cont ul li').width(), 
    imageLen = $('.slider_cont ul li').length, 
    totalWidth = imageWidth * imageLen, 
    current = 1, 
    lastWidth = totalWidth - imageWidth; 


$('button').on('click',function(){ 
    var direction = $(this).data('dir');  
    (direction == 'next')?++current:--current; 
    var Unit = (direction == 'next')?'-=':'+='; 
    var curUnite = Unit+imageWidth; 
    alert(curUnite) 
    if(current!=0) 
    { 

     $('.slider_cont ul').animate({ 
      left: curUnite+'px', 
      }, 500, function() { 
      // Animation complete. 
      }); 

     } 

      if(current==0) 
    { 


     $('.slider_cont ul').animate({ 
      left: '-='+lastWidth+'px', 
      }, 500, function() { 
      current = imageLen; 
        }); 

     } 
     if(current>imageLen) 
     { 
      $('.slider_cont ul').animate({ 
      left: '0px', 
      }, 500, function() { 
      current = 1; 

      }); 
      } 
    })

任何幫助和建議，將不勝感激:)

來源

2013-02-02 Kamal

您可以存儲的當前副本'li'，刪除原來的並添加複製的一個。 – hjpotter92

@BackinaFlash謝謝你的幫助....但我沒有得到你..對不起，請你解釋.. – Kamal

你這樣做：

if (current == 0) { 


    $('.slider_cont ul').animate({ 
     left: '-=' + lastWidth + 'px', 
    }, 500, function() { 
     current = imageLen; 
    }); 

} 
else if (current > imageLen) { 
    $('.slider_cont ul').animate({ 
     left: '0px', 
    }, 500, function() { 
     current = 1; 

    }); 
} 
else if (current != 0) { 

    $('.slider_cont ul').animate({ 
     left: curUnite + 'px', 
    }, 500, function() { 
     // Animation complete. 
    }); 

}

那這裏的怪動畫從何而來。因爲你排隊第二個。 Whichc跳回到開始。將第一個動畫放入else語句中。你不會有奇怪的跳躍。

活生生的例子：http://jsfiddle.net/VMZ8J/3/

來源

2013-02-02 18:37:15 Niels

感謝您的幫助兄弟.. :)乾杯 – Kamal

jsFiddle demo

var imageWidth = $('.slider_cont ul li').width(), 
    imageLen = $('.slider_cont ul li').length, 
    counter = 0; 


$('button[data-dir]').click(function(){ 

    var dir = $(this).data('dir') == 'next' ? counter++ : counter-- ; 
    counter = counter<0 ? imageLen-1 : counter%imageLen ; 
    $('.slider_cont').stop().animate({scrollLeft: imageWidth*counter},800); 

});

來源

2013-02-02 18:43:06

創建一個jQuery圖像滑塊

回答

相關問題