Автопрокрутка списка товаров - PullRequest
Новая
       4

Автопрокрутка списка товаров

0 голосов
/ 01 декабря 2018

У меня есть список элементов в div, а внешние div имеют фиксированную высоту.Таким образом, предметы переполнены, но спрятаны внутри внешнего div.Я хочу прокрутить внешний div, пока последний элемент в списке не станет видимым.Я на полпути там.Я прокрутил внешний div до последнего пункта списка.

Вот что я сделал до сих пор: 

$(document).ready(function() {

  $m = $('.marq');
  $q = $('.qbox');
  var mh = $m.height();
  var qh = $q.height();
  var currscr = 0;
  scroll();

  function scroll() {

    var xpx = mh - qh;
    if (mh > qh) {
      currscr = xpx;
      setInterval(function() {
        autoscroll();
      }, 50);

    } else {
      console.log("too few items");
    }
  }

  function autoscroll() {

    if (currscr > 0) {
      var ch = $m.css('top').replace('px', '');
      $m.css('top', (ch - 1) + 'px');
      --currscr;
    }

  }



});
.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>

Останавливается при достижении последнего предмета.Я хочу, чтобы после некоторой задержки он вернулся к первому пункту.Затем прокрутите вниз до некоторой задержки.И повторять это бесконечно.

ПРИМЕЧАНИЕ. Скорость должна быть одинаковой, а количество элементов в списке не должно влиять на скорость прокрутки.Это применимо как к прокрутке сверху вниз, так и снизу вверх.Анимация прокрутки должна быть более линейной.

Любая помощь?

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018 

var scroller = document.getElementById('scroller');
var scroller_height = scroller.clientHeight;
var qbox_height = document.getElementById('qbox').clientHeight;

function scrollForever(p_top)
	{
	var move_distance = 1;
	var new_top = p_top - move_distance;
	scroller.style.top = ""+p_top+"px";
	if(scroller_height+(new_top-qbox_height)>=0)
		{
		setTimeout(function(){scrollForever(new_top)},50);
		}
	else
		{
		setTimeout(function(){scrollBack(new_top)},1000);
		}
	}
function scrollBack(p_top)
	{
	var move_distance=1;
	if(p_top<0)
		{
		p_top = p_top+move_distance;
		scroller.style.top = ""+p_top+"px";
		setTimeout(function(){scrollBack(p_top)},50);
		}
	else
		{
		scroller.style.top = "0px";
		setTimeout(function(){scrollForever(0)},1000);
		}
	}
scrollForever(0);
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>scrolling.html</title>
<style type="text/css">

.qbox {
  height: 175px;
  width: 500px;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}

</style>
</head>

<body>

<div class="qbox" id="qbox">
  <div class="marq" id="scroller">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>
</body>

</html>
Вот обновление, которое делает то, что вы хотите.Ура !!
0 голосов
/ 01 декабря 2018

Вы были почти в конце!

Я создал 3 переменные: 

var interval; /* this is to put your setInterval */
var waitingTimeBottom = 2000; /* This is waiting time when you arrive at the bottom */
var waitingTimeTop =5000 /* This is waiting time on top */

Затем поместите ваш setInterval в эту переменную в функции scroll (): 

interval=setInterval(function() {
    autoscroll();
}, 50);

После этого я работал только в конце функции autoscroll (), добавляя 2 запрошенные вами задержки: 

else {
    clearInterval(interval);
    $m.delay(waitingTimeBottom).animate({'top': '0px'}, 2000, function() {
        setTimeout(function()  {
            scroll();
        }, waitingTimeTop);
    });
}

Это весь код в действии: 

$(document).ready(function() {

    $m = $('.marq');
    $q = $('.qbox');
    var mh = $m.height();
    var qh = $q.height();
    var currscr = 0;

    var interval;
    var waitingTimeBottom = 2000;
    var waitingTimeTop = 5000

    scroll();

    function scroll() {

        var xpx = mh - qh;
        if (mh > qh) {
            currscr = xpx;

            interval = setInterval(function() {
                autoscroll();
            }, 50);

        } else {
            console.log("too few items");
        }
    }

    function autoscroll() {

        if (currscr > 0) {
            var ch = $m.css('top').replace('px', '');
            $m.css('top', (ch - 1) + 'px');
            --currscr;
        } else {
            clearInterval(interval);
            $m.delay(waitingTimeBottom).animate({
                'top': '0px'
            }, 2000, function() {
                setTimeout(function() {
                    scroll();
                }, waitingTimeTop);
            });
        }
    }

});
.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>

Надеюсь, это поможет!: -)

РЕДАКТИРОВАТЬ 1

Я немного изменил ваш JavaScript, используя еще две простые анимации с линейной скоростью: 

$(document).ready(function () {

	$m = $('.marq');
	$q = $('.qbox');
	var mh = $m.height();
	var qh = $q.height();

	var xpx = mh - qh;

	var waitingTimeBottom = 2000;
	var waitingTimeTop = 5000;
	var animationTime = xpx * 20; /* Here you can change the speed: if you use "xpx" variable, it never changes according to the number of items => change only the duration, not the speed. */

	function scroll() {
		$m.animate({'top': -xpx + "px"}, animationTime, "linear", function () {
			$m.delay(waitingTimeBottom).animate({'top': '0px'}, animationTime, "linear", function () {
				setTimeout(function () {
					scroll();
				}, waitingTimeTop);
			});
		});
	}


	if (mh > qh) {
		scroll();
	} else {
		console.log("too few items");
	}

});
.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...