时间戳

首页 > 解决方案 > 多个自动滚动项目列表

javascript - 多个自动滚动项目列表

问题描述

这就是我现在所拥有的

$(document).ready(function () {

	var waitingTimeBottom = 2500;
	var waitingTimeTop = 5000;
	var animFactor = 20;
	


	autoScroll('.qbox1');
	autoScroll('.qbox2');
	autoScroll('.qbox3');
	autoScroll('.qbox4');
	



	function autoScroll(qbx){
		$q = $(qbx);
		$m = $(qbx + ' .marq');
		var mh = $m.height();
		var qh = $q.height();

		var xpx = mh - qh;

		var animationTime = xpx * animFactor; 

		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");
		}
	}

});
.qbox1, .qbox2, .qbox3, .qbox4 {
	height: 60vh;
	width: auto;
	box-sizing: border-box;
	overflow: hidden;
	float:left;
	margin-left: 2px;
}

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

.item {
	color: #39739d;
	background-color: #E1ECF4;
	border-color: #96bdd9;
	box-shadow: inset 0 1px 0 #f4f8fb;
	box-sizing: border-box;
	padding: 5px;
	margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
  <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>

<div class="qbox2">
  <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>

<div class="qbox3">
  <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>

<div class="qbox4">
  <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>

在四个中，一个qbox应该像

$(document).ready(function() {

  var waitingTimeBottom = 2500;
  var waitingTimeTop = 5000;
  var animFactor = 20;

  autoScroll('.qbox1');

  function autoScroll(qbx) {
    $q = $(qbx);
    $m = $(qbx + ' .marq');
    var mh = $m.height();
    var qh = $q.height();

    var xpx = mh - qh;

    var animationTime = xpx * animFactor;

    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");
    }
  }

});
.qbox1,
.qbox2,
.qbox3,
.qbox4 {
  height: 60vh;
  width: auto;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
  margin-left: 2px;
}

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

.item {
  color: #39739d;
  background-color: #E1ECF4;
  border-color: #96bdd9;
  box-shadow: inset 0 1px 0 #f4f8fb;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
  <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>

为什么qbox插入多个时会发生冲突？

标签： javascriptjqueryhtmlcssloops

解决方案

试试这个...更改 $q = $(qbx); $m = $(qbx + ' .marq');为var $q = $(qbx); var $m = $(qbx + ' .marq');

$(document).ready(function () {

	var waitingTimeBottom = 2500;
	var waitingTimeTop = 5000;
	var animFactor = 20;
	


	autoScroll('.qbox1');
	autoScroll('.qbox2');
	autoScroll('.qbox3');
	autoScroll('.qbox4');
	



	function autoScroll(qbx){
		var $q = $(qbx);
		var $m = $(qbx + ' .marq');
		var mh = $m.height();
		var qh = $q.height();

		var xpx = mh - qh;
		var animationTime = xpx * animFactor; 

		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");
		}
  
 
	}


});
.qbox1, .qbox2, .qbox3, .qbox4 {
	height: 60vh;
	width: auto;
	box-sizing: border-box;
	overflow: hidden;
	float:left;
	margin-left: 2px;
}

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

.item {
	color: #39739d;
	background-color: #E1ECF4;
	border-color: #96bdd9;
	box-shadow: inset 0 1px 0 #f4f8fb;
	box-sizing: border-box;
	padding: 5px;
	margin-bottom: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox1">
  <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>

<div class="qbox2">
  <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>

<div class="qbox3">
  <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>

<div class="qbox4">
  <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>

推荐阅读