Question

我找不到允许sentence here后跟end word的任何答案

这个想法是，我将在一个跨度中有一个项目列表，然后在它们之间切换，因此句子的开头是相同的，只有结尾是变化的。理想情况下，应该有某种动画形式，但即使只是功能也会受到赞赏。

<p class="itemlist">We sell
    <span class="items">
      <span>Bread</span>
      <span>Milk</span>
      <span>Fish</span>
      <span>Eggs</span>
      <span>Cheese</span>
    </span>
  </p>

理想情况下，我希望它一次显示一个项目。最终结果看起来像下面的GIF，但文本应保留在同一位置。

Gif of intention.

任何提示/答案将不胜感激。我为此花了两个小时。

谢谢。

Answer 1

以下是使用setInterval的示例

let i=0;
const items = Array.from(document.querySelectorAll('.items span'));

const showNewItem = (index) => {
  items.forEach(i => i.style.display = 'none');
  
  items[index].style.display = 'inline';
}

// Initial call
showNewItem(i++);

setInterval(() => {
  showNewItem(i++);
  if(i > items.length-1) i = 0;
},1000);

<p class="itemlist">We sell
    <span class="items">
      <span>Bread</span>
      <span>Milk</span>
      <span>Fish</span>
      <span>Eggs</span>
      <span>Cheese</span>
    </span>
  </p>

Answer 2

是setInterval是关键 [edit]文本现在居中

const All_span = document.querySelectorAll('p.itemlist span.items span');
var NoSpan = 0;

setInterval(() => {
    All_span[NoSpan++].style.display = 'none';
    NoSpan %= All_span.length;
    All_span[NoSpan].style.display = 'inline';
}, 900);

p.itemlist {
	font: 2em Verdana, Geneva, Arial, Helvetica, sans-serif;
	display: block;
	width: 8em;
	text-align: center;
}
p.itemlist span.items span {
	display: none;
	color:crimson;
}
p.itemlist span.items span:first-child {
    display: inline;
}

<p class="itemlist">We sell
	<span class="items">
		<span>Bread</span>
		<span>Milk</span>
		<span>Fish</span>
		<span>Eggs</span>
		<span>Cheese</span>
	</span>
</p>

Answer 3

var itemArray = ['Bread', 'Milk', 'Fish', 'Eggs', 'Cheese'];
var animationInterval;

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function setItemName(_name) {
  var itemList = document.getElementsByClassName('items')[0];
  itemList.textContent = _name;
}

function startAnimation() {
  animationInterval = setInterval(function(){
    var randomNumber = getRandomInt(itemArray.length);
    setItemName(itemArray[randomNumber]);
  }, 1000)
}

function endAnimation() {
  clearInterval(animationInterval);
}

setItemName(itemArray[0]);

<p class="itemlist">We sell
    <span class="items"></span>
 </p>
  
<button onclick="startAnimation();"> Start </button>
<button onclick="endAnimation();"> End </button>

Answer 4

您可以添加延迟。这是该示例代码

<!DOCTYPE html>
<html>
<body>


 

 <p class="itemlist">We sell
    <span class="items">
      <span id="demo"> Bread</span>
      
    </span>
  </p>

<script>
 
 

var delayInMilliseconds1 = 1000; 
var delayInMilliseconds2 = 2000; 
var delayInMilliseconds3 = 3000; 

setTimeout(function() {
    document.getElementById("demo").innerHTML = "Milk";
}, delayInMilliseconds1);

setTimeout(function() {
    document.getElementById("demo").innerHTML = "Fish";
}, delayInMilliseconds2);

setTimeout(function() {
    document.getElementById("demo").innerHTML = "Eggs";
}, delayInMilliseconds3);

</script>

</body>
</html>

Answer 5

设置一项以使用“ first”之类的类开始

使用jQuery，获取项目列表，并设置时间间隔。然后淡出当前的活动对象，然后淡入下一个。

仅通过抓住下一个同级元素，或者如果到达末尾就抓住项目列表的第一个子元素来查找下一个元素。

let itemsList = $(".items").first();

const changeItem = () => {
  let current = itemsList.find("span.active");
  current.removeClass("active");
  current.fadeOut(200, () => {
    let next;
    if (current.next().length > 0) next = current.next();
    else next = itemsList.children().first();
    next.addClass("active");
    next.fadeIn(200);
  });
}

setInterval(changeItem, 2000);

.items span {
  color: red;
  display: none;
}

span.first {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="itemlist">We sell
    <span class="items">
      <span class="active first">Bread</span>
      <span>Milk</span>
      <span>Fish</span>
      <span>Eggs</span>
      <span>Cheese</span>
    </span>
  </p>

Answer 6

如何将数据与HTML分离？并使用setInterval然后

const itemList = ['Bread', 'Milk', 'Fish']
const prefix = "We Sell"

const placeholder = document.getElementById('placeholder');
let index = 0;

setInterval(() => {
  index = index >= itemList.length ? 0 : index;

  placeholder.innerHTML = `${prefix} <span style='color: red'> ${itemList[index]} </span>`;

  index++;
}, 1000)

<div id="placeholder" />

Answer 7

有关信息，您也可以使用CSS variable和CSS animation

span {
  display: inline-block;
  vertical-align: top;
}

.items span {
  position: absolute;/* instead display */
  animation: var(--delay, 0) 10s hidsh linear infinite;
}

@keyframes hidsh {
  0%,
  80% {
    color: transparent;
  }
  80.1%,
  100% {
    color: initial
  }

<p class="itemlist">We sell
  <span class="items">
      <span style='--delay:-2s' >Bread </span>
  <span style='--delay:-4s'>Milk  </span>
  <span style='--delay:-6s'>Fish  </span>
  <span style='--delay:-8s'>Eggs  </span>
  <span style='--delay:-10s'>Cheese</span>
  </span>
</p>

如果您不想触摸HTML

，也可以在样式表中声明自定义属性。

.items span              {--delay:-2s }
.items span:nth-child(2) {--delay:-4s }
.items span:nth-child(3) {--delay:-6s }
.items span:nth-child(4) {--delay:-8s }
.items span:nth-child(5) {--delay:-10s}
span {
  display: inline-block;
  vertical-align: top;
}

.items span {
  position: absolute;/* instead display*/
  animation: var(--delay, 0) 10s hidsh linear infinite;
}

@keyframes hidsh {
  0%,
  80% {
    color: transparent;/* instead visibility or opacity */
  }
  80.1%,
  100% {
    color: initial
  }

<p class="itemlist">We sell
  <span class="items">
   <span>Bread </span>
   <span>Milk  </span>
   <span>Fish  </span>
   <span>Eggs  </span>
   <span>Cheese</span>
  </span>
</p>

在跨度之间自动切换

7 个答案: