Плавная остановка карусели

@maruo · Регистрация: 26.04.2013

Студворк — интернет-сервис помощи студентам

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

Запускается
Крутится секунд 10
Плавно останавливается теряя скорость прокрутки

HTML5
1
2
3
4
<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>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(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);
});

ДЕМО

@BANO · 06.12.2015, 23:37

вот моя реализация

js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function() {
  var marg = 2; // отступы между фотками
  var hght = 100; // высота карусели 
  speed = 15; // скорость прокрутки
 
 
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  var down = 1,
    downS = false;
  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();
    var d = speed * down;
    ss.innerHTML = down;
    down = downS ? Math.max(0, down - .01) : 1;
    crsl.scrollLeft(scroll + d);
    if (scroll > firstImg.width()) {
      crsl.scrollLeft(scroll - (firstImg.width() + (marg * 2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
    }
  }
  crsl
    .mouseover(function() {
      downS = true;
    })
    .mouseout(function() {
      downS = false;
    })
  timer = setInterval(rightScroll, 10);
});

@maruo · 08.12.2015, 00:25 **[ТС]**

Сообщение от BANO

вот моя реализация

почти то что надо, значения я поменяю, и кокрас будет
Благодарю

Добавлено через 23 часа 25 минут
Подскажите как остановить карусель, после остановки или по нажатию.
А то как я курсор убираю она заного начинает крутиться

Добавлено через 30 секунд

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function() {
  var marg = 2; // отступы между фотками
  var hght = 100; // высота карусели 
  speed = 15; // скорость прокрутки
 
 
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  var down = 1,
    downS = false;
  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();
    var d = speed * down;
    ss.innerHTML = down;
    down = downS ? Math.max(0, down - .01) : 1;
    crsl.scrollLeft(scroll + d);
    if (scroll > firstImg.width()) {
      crsl.scrollLeft(scroll - (firstImg.width() + (marg * 2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
    }
  }
  crsl
    .mouseover(function() {
      downS = true;
    })
    .mouseout(function() {
      downS = false;
    })
  timer = setInterval(rightScroll, 10);
});

Добавлено через 46 минут
решил проблему

JavaScript
1
ExitTimer("10");

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .