Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Остановка карусели по истечению времени.
maruo  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 329
Пользователь №: 37433
На форуме: 4 года, 13 дней
Карма: 1




Имеется подобие слайда с картинками, которое прокручивается в бесконечном цикле.
Приостанавливается при наведении курсором на нее.
Как реализовать следующие:
Запускается
Крутится секунд 10
Плавно останавливается теряя скорость прокрутки
<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);
});


ДЕМО

Это сообщение отредактировал maruo - 6.12.2015 - 21:22
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса