图像滑块；停在最后一张图片答案

【问题标题】：Image slider; stop at last image图像滑块；停在最后一张图片
【发布时间】：2010-08-16 17:45:40
【问题描述】：

我只是 Javascript 和 jQuery 的初学者。我正在尝试创建自己的图像滑块，但是我无法弄清楚如何让它停在最后一张图像上。谁能帮帮我？

这是目前为止的代码：

// Javascript 文档

$(文档).ready(函数(){

  var 幻灯片 = $(".slides");
  var numberOfSlides = slides.length;
  var currentPosition = 0;
  变量幻灯片宽度 = 500

  // 将宽度应用到 .slider
  $('.slider').css('width', slideWidth * numberOfSlides);

  如果（当前位置

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

【问题讨论】：

标签： jquery image slider

【解决方案1】：

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

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

【讨论】：

考虑到他在开始时将“currentPosition”设置为1，条件检查需要==而不是<.>
您可以在这里亲自查看：matthewruddy.com/jquery-slider 此外，出于某种原因，它似乎不适用于除 IE8 之外的任何其他浏览器。谁能证实这一点？我不知道为什么..
您使用背景图片有什么原因吗？只是好奇。
因为我打算将滑块与 Wordpress 和许多 Wordpress 主题一起使用，所以会向图像添加“最大宽度”CSS 属性，这会破坏我当前使用的滑块的功能。出于这个原因，我开始创建自己的非常相似的滑块，它使用背景图像，并且做一些与我当前使用的不同的事情。
好的，我想我在这里找到了问题。您正在将 LI 设置为内联显示，并且您正在使用背景图像。这意味着由于它是内联的，它正在寻找元素的内容来确定宽度和高度，因此它不会考虑 CSS 中的宽度和高度。如果要设置宽度和高度，则需要将其设置为 display:block，如果希望将 lis 堆叠在右侧，则需要将其设置为 float:left。

【解决方案2】：

您尝试过简单的条件吗？看起来你已经有了所有的部分......只需在你做动画之前询问 currentPosition 是否等于幻灯片数组的长度。

【讨论】：

【解决方案3】：

这是我的代码和演示：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);
  });
}

【讨论】：