如何使用jQuery旋转HTML内容，使顺序每30秒改变一次

How to rotate HTML content so that the order changes every 30 seconds with jQuery?

本文关键字：改变 30秒 一次 顺序 旋转 jQuery 何使用 HTML 内容      更新时间：2023-09-26

基本上我已经创建了一个包含3篇文章的列，我给了所有文章的id，即news1,news2,news3，并相应地为每个添加了内容[文本和img，加上标题]

我想做的是移动

的内容

第1条到第2条的位置第2条移至第3条的地点第3条至第1条所在地

随着文章位置的改变，每隔30秒，[上面的循环]我尝试了appendTo，昨天考虑了淡出，淡出，使用幻灯片我认为将是;我觉得在代码方面有点过分了，然后又想了一下……嗯……

我宁愿整批修改内容，也不愿分批修改，如标题、段落、图片等。

这就是我开始的方式，我的想法是，如果我能让它在一对中工作，其余的将直接进行，无论是复制和粘贴，还是编辑选择器。

setInterval(function(){
var x = getElementById("#news1");
(this).appendTo("#news3");
}, 30000);

希望有人能引导我在正确的方向，无论是通过说明一个例子或事件'动作'来检查，可能会做的伎俩

您听说过DOM操作吗?是那些来自Node参考https://developer.mozilla.org/en-US/docs/Web/API/Node的方法来处理节点，如insertBefore, removeChild, appendChild等等

例如，下面的代码使用了标准dom代码。将最后一个元素移动到树栈中的第一个位置。阅读评论以获得解释:

  // cache the container element
  var containerEl = document.getElementById('container');
  // This is a live reference to the child node finds the last child.
  // The querySelector was use here in order to get a controll over 
  // what elements category should be manipulated
  var lastEl = containerEl.querySelector('.article:last-child');
  // move the element in front - remove from parent
  containerEl.removeChild(lastEl);
  // attach it back in the front.
  containerEl.insertBefore(lastEl, containerEl.firstChild);

现在问题的第二部分是时间事件。您可以使用requestAnimationFrame或定时器或间隔。

我个人更喜欢计时器解决方案，因为它是向后兼容的，它没有机会同时执行计划的代码，你可以在没有对timerId的引用的情况下在内部停止更改。也许requestAnimationFrame是一个更好的选择，但这取决于你。

要链式调度执行，可以使用简单的递归:

var timerIdx;
var chainInterval = 6000; // in millis
var callback = function (){
  // the execution code here;
  timerIdx = setTimeout(callback, chainInterval);
};

要启动它，只需调用:

callback();

要停止它，只需调用:

clearTimeout(timerIdx);

现在让我们把所有的东西放在一起，风格只是为了展示:

// cache the container element
var containerEl = document.getElementById('container');
var timerIdx;
var chainInterval = 1000; // in millis
var chainRotate = function (){
  rotateChildElements(containerEl, '.article')
  timerIdx = setTimeout(chainRotate, chainInterval);
};
var rotateChildElements = function(containerEl, childClassName){
  // This is a live reference to the child node
  var lastEl = containerEl.querySelector(childClassName+':last-child');
  // move the element in front
  containerEl.removeChild(lastEl);
  containerEl.insertBefore(lastEl, containerEl.firstChild);
 };
// Start
chainRotate();
var rotateBtn = document.getElementById('rotateBtn');
rotateBtn.addEventListener('click', function(ev){
   if (timerIdx !== null){
    ev.target.innerHTML = "Start Rotate";
    clearTimeout(timerIdx);
    timerIdx = null;
   } else {
    ev.target.innerHTML = "Stop Rotate";
    chainRotate(); 
   }
});
* {
 box-sizing : border-box;
}
#container {
 position: relative;
 
 margin-left : auto;
 margin-right: auto;
 padding : 8px;
 border : 1px dashed magenta;
 max-width : 500px;
}
#container:after {
  content : "";
  clear: both;
  display: block;
}
.article:first-child {
 margin-left : -4px;
}
.article:last-child {
 margin-right : -4px;
}
.article {
  float: left;
  width : 33.333%;
  margin-right : 4px;
  border : 1px solid blue;
}
<div id="container">
  <div class="article">
    A content
  </div>
  <div class="article">
    B content
  </div>
  <div class="article">
    C cotntent
  </div>
</div>
<br />
<hr />
<button id="rotateBtn">Stop rotate</button>

希望有帮助

有很多方法可以做到这一点。下面是一个使用jQuery的简单JSFiddle，它给您留下了很多改进的空间。虽然您当然可以使用变量来保存DIV的内容，但我只是使用了一个隐藏的DIV作为临时内容持有人。您还可以通过在变量中保留四个DIV指针来优化rotateNews()函数，例如将var $news1 = $("#new1");放在函数的首位。

纯javascript解决方案:将div的内容存储在变量中，然后根据需要将每个div的内容重新分配给其他div。

setInterval(function(){
    var contents_n1 = document.getElementById("news1").innerHTML;
    var contents_n2 = document.getElementById("news2").innerHTML;
    var contents_n3 = document.getElementById("news3").innerHTML;
    document.getElementById("news1").innerHTML = contents_n3;
    document.getElementById("news2").innerHTML = contents_n1;
    document.getElementById("news3").innerHTML = contents_n2;
}, 30000);
相关文章：