Question

我只是Javascript＆amp; amp;的初学者jQuery的。我正在尝试创建自己的图像滑块，但我无法弄清楚如何让它停在最后一个图像。任何人都可以帮助我吗？

以下是目前的代码：

// Javascript Document

$(document).ready(function(){

  var slides = $(".slides");
  var numberOfSlides = slides.length; 
  var currentPosition = 0;
  var slideWidth = 500

  // Apply width to .slider
  $('.slider').css('width', slideWidth * numberOfSlides);

  if( currentPosition

感谢任何可以提供帮助的人。马修。

Answer 1

将您的点击包裹在if语句中，该语句检查当前位置是否等于幻灯片数量：

if( currentPosition <= numberOfSlides ){
    $(".controls").bind('click',function(){
    $(".slider").animate({left:-slideWidth*(currentPosition)},{duration:800,easing:'easeInOutCubic'});
    currentPosition++;
  });
}

Answer 2

你试过一个简单的条件吗？看起来你已经拥有了所有的部分......只要在进行动画制作之前询问currentPosition是否等于slide数组的长度。

Answer 3

这是我的代码＆amp;演示： http://jsbin.com/ixoqu3

基本规则是在

时限制动画

1）(current Image index) * (Image width) of the slider is greater than total width
2）(current Image index) * (Image width) of the slider is less than 0 (zero)

以下JavaScript代码说明相同，请查看工作 Demo

HTML ：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hello world !!</title>
  <style type="text/css">
    body{
      background:#000;
      color:#fff;
    }
    #slider {
      padding:0px;
      margin:0px auto;
      overflow:hidden;
      width:500px;
      border:10px solid #d5d5d5;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      -moz-box-shadow:0px 0px 20px #f0f;
      -webkit-box-shadow:0px 0px 20px #f0f;
      box-shadow:0px 0px 20px #f0f;
    }
    ul {
      padding:0px;
      margin:0px;
      position:relative;
      list-style:none;
     }
    li {
      float:left;
      padding:0px;
      margin:0px;
    }

    #nav {
      margin:0px auto;
      width:200px;
    }
    span{
      padding:10px;
      background:#3f3f3f;
      color:#fff;
      font:bold 16px verdana;
      -moz-border-radius:10px;
      border:1px solid #fff;
      -moz-box-shadow:0px 0px 30px #0099f9;
      -webkit-box-shadow:0px 0px 30px #0099f9;
      box-shadow:0px 0px 30px #0099f9;
      cursor:pointer;
    }
    #num {
      padding:5px;
      background:#000;
    }
    </style>

</head>
<body>
  <div id="slider">
    <ul>
      <li>
        <img src="http://www.autoblog.com/media/2006/05/cars-movie.png"/>
      </li>

      <li>
        <img src="http://www.mediabistro.com/fishbowlLA/original/carpass.jpeg.jpg"/>
      </li>

      <li>
        <img src="http://disney-clipart.com/Cars/Disney-Cars-McQueen.jpg"/>
      </li>

      <li>
        <img src="http://www.cargurus.com/blog/wp-content/uploads/2009/01/cars-lightning-mcqueen.jpg"/>
      </li>
      <li>
        <img src="http://www.grahammilton.com/folio/folio_cars1.jpg"/>
      </li>      
    </ul>
  </div>
  <br /><br />
  <div id="nav"
    <span id="prev"> Prev </span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="next"> Next </span>
      <br /><br /><br />
      Slide number : &nbsp;&nbsp;<span id="num">1</span>
  </div>
</body>
</html>

JavaScript ：

  var img_width = 500;
  var img_height = 250;
  var slide = 0;
  var speed = 500;
  var size = 0;
$(document).ready(function() {

  size = $('#slider').find('img').length;

  $('#slider').find('ul').width(img_width * size).height(img_height);
  $('#slider li, #slider img').width(img_width).height(img_height);

  $('#next').bind('click',function() {
    if(slide > img_width * (size - 1) *(-1)) {
          slide -= img_width;
         slider(slide);
    }
  });
  $('#prev').bind('click',function() {
     if(slide < 0) {
      slide += img_width;
        slider(slide);
    }
  });
});

function slider(slideMargin) {
  $('#slider ul').stop().animate({'left':slideMargin}, speed ,function(){
      $('#num').text(Math.abs(slideMargin/ (100 *size)) + 1);
  });
}

图像滑块;停在最后的图像

3 个答案: