Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2015, 21:32
Новичок на форуме
Отправить личное сообщение для maruo34 Посмотреть профиль Найти все сообщения от maruo34
 
Регистрация: 06.12.2015
Сообщений: 1

Плавная остановка карусели
Имеется подобие слайда с картинками, которое прокручивается в бесконечном цикле.
Приостанавливается при наведении курсором на нее.
Как реализовать следующие:
  1. Запускается
  2. Крутится секунд 10
  3. Плавно останавливается теряя скорость прокрутки

<div id="carusel" style="border:solid;width:500px;overflow:auto">
  <div id="scrolled"> <img src="#" width="300px" height="200px" style="background-color:green;float:left;" alt="image 0"> <img src="#" width="350px" height="200px" style="background-color:yellow;float:left;" alt="image 1"> <img src="#" width="250px" height="200px" style="background-color:blue;float:left;"
    alt="image 2"> <img src="#" width="310px" height="200px" style="background-color:red;float:left;" alt="image 3"> </div>
</div>


$(document).ready(function() {
  var marg = 2; // отступы между фотками
  var hght = 100; // высота карусели 
  speed = 12; // скорость прокрутки
  
 
 
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  imgs.css("margin", "0 " + marg);
  crsl.css({
    overflow: "hidden",
    "height": hght
  });
  $.each(imgs, function(index, value) {
    wdth += ($(imgs[index]).width() + (marg * 2) + 5);
  })
  scrl.width(wdth);
 
  function rightScroll() {
    var firstImg = $("#scrolled > img:first");
    var lastImg = $("#scrolled > img:last");
    var scroll = crsl.scrollLeft();
    crsl.scrollLeft(scroll + speed);
    if (scroll > firstImg.width()) {
      crsl.scrollLeft(scroll - (firstImg.width() + (marg * 2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
      
    }
  }
  crsl.mouseover(function() {
    clearInterval(timer);
  }).mouseout(function() {  
    timer = setInterval(rightScroll, 10);
  })
  timer = setInterval(rightScroll, 10);
});


ДЕМО
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Отображение скрытого блока из карусели Kasper28 Элементы интерфейса 6 11.02.2014 16:40
Некорректная прокрутка карусели. плагин к jq zlodiak jQuery 1 09.07.2013 14:32
jcarousel - Мгновенная остановка карусели. radogost jQuery 0 31.10.2012 18:08
Проблема скрипта карусели в firefox. Очень прошу помощи. -user21- jQuery 5 16.06.2010 13:38