Слайдер изображений; остановиться на последнем изображении - PullRequest
Новая
       4

Слайдер изображений; остановиться на последнем изображении

1 голос
/ 16 августа 2010

Я только начинающий с Javascript и 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

Спасибо всем, кто может помочь. Мэтью.

Ответы [ 3 ]

0 голосов
/ 16 августа 2010

Вы пробовали простое условное выражение?Кажется, у вас есть все кусочки там ... просто спросите, равна ли currentPosition длине массива слайдов, прежде чем выполнять анимацию.

0 голосов
/ 21 августа 2010

Вот мой код и демо: 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 говорит то же самое, ознакомьтесь с Рабочим Демо

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);
  });
}
0 голосов
/ 16 августа 2010

Оберните ваш клик в операторе if, который проверяет, равна ли текущая позиция количеству слайдов: 

if( currentPosition <= numberOfSlides ){
    $(".controls").bind('click',function(){
    $(".slider").animate({left:-slideWidth*(currentPosition)},{duration:800,easing:'easeInOutCubic'});
    currentPosition++;
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...