Javascript.RU

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

Попытка добиться цикличной анимации в слайдере
Всем доброго времени суток. Верстаю свой первый слайдер, а точней пытаюсь воспроизвести bxslider.
Оригинал слайдера тут http://solopine.com/rosemary/#.
Мои наработки тут http://l1m0n.com.ua/.
Вопрос: как автор слайдера добился эфекта перехода в начало без прокрутки обратно?!

А вот отрывок метода, который запускает анимацию(пока только 1 итерация):
run: function(speed) {
		var self = this;
		var start = setInterval(function(){
			//self.wrapper.style.left = "-" + self.slideWidth * self.counter + "px";
			self.wrapper.style.transform = "translate3d(-" + self.slideWidth * self.counter + "px, 0px, 0px)";
			self.counter++;
			if (self.counter == self.total ){
				self.wrapper.style.transitionDelay = "0s";
			}
			else if (self.counter == self.total +1){
				clearInterval(start);
				self.counter = 1;
				self.wrapper.style.transform = "translate3d(-" + self.slideWidth * self.counter + "px, 0px, 0px)";
			}
		}, speed);
	}
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2015, 12:57
Новичок на форуме
Отправить личное сообщение для L1m0n Посмотреть профиль Найти все сообщения от L1m0n
 
Регистрация: 30.09.2015
Сообщений: 5

Не совсем понял. Можно немного разжевать?)
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2015, 13:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

L1m0n,
4 слайда изначально -- 1,2,3,4
bxslider делает
4клон,1,2,3,4, 1клон
идет прыжок с клона на настоящий слайд или на оборот -- перед показом
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2015, 14:21
Новичок на форуме
Отправить личное сообщение для L1m0n Посмотреть профиль Найти все сообщения от L1m0n
 
Регистрация: 30.09.2015
Сообщений: 5

Ну да, я так и сделал:
1 слайд, 2 слайд, 3 слайд , слайд клон с 1 слайдом и здесь с 0 транзишн делаю переход обратно на 1 слайд и получается прокрутка всех слайдов на начало.
Как добиться перехода на начало, как в bxслайдере, что бы не было видно что слайдер отъехал назад
Ответить с цитированием
  #5 (permalink)  
Старый 01.10.2015, 14:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от L1m0n
здесь с 0 транзишн делаю переход обратно на 1 слайд и получается прокрутка всех слайдов на начало.
да но в нормальном случае это не видно!!!
Ответить с цитированием
  #6 (permalink)  
Старый 01.10.2015, 14:33
Новичок на форуме
Отправить личное сообщение для L1m0n Посмотреть профиль Найти все сообщения от L1m0n
 
Регистрация: 30.09.2015
Сообщений: 5

Пардон за мою тупость! Вместо transitionDuration использовал transitionInterval!
Большое спасибо Рони)
все работает как задумано)
Ответить с цитированием
  #7 (permalink)  
Старый 01.10.2015, 15:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Бесконечная простейшая карусель на jQuery макет
L1m0n,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;
  }
  #carusel {
    position:relative; top: 0px; left:-100px; display:block;
    width: 600px; height:50px;
    padding: 0px; margin: 0px;
  }
  div{
     overflow:hidden; width: 100px; height:50px; position: relative; left: 100px
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
    var n = 0;
    function go() {
        $('#carusel').delay(3000).animate({
            left: '-=100'
        }, 300, function () {
        n = ++n % 4;
        !n && $('#carusel').css({
                left: '-100px'
            });
        go()
        })
    }
    go()
})
  </script>
</head>

<body>
<div>
		<ul id="carusel">
            <li  id = "4c" style="background-color:DeepPink;">4</li><!--//клон-->
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;">2</li>
			<li  id = "3" style="background-color:Yellow;">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "1c" style="background-color:red;">1</li>   <!--//клон-->
		</ul>
	</div>
</body>
</html>

Последний раз редактировалось рони, 01.10.2015 в 15:06.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
верстка слайдера Cannot read property 'offSetLeft' L1m0n Events/DOM/Window 0 01.10.2015 00:10
Начало анимации с места предыдущей анимации FanAizu (X)HTML/CSS 3 21.03.2014 12:39