创建一个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图像滑块

回答

相关问题