文本定时变动

Posted 2020-11-02 lsdk

效果：

 

基础HTML：

<div id="list">
     <ul id="contain" class="abk" name="con_list">
        <li>一个现代 javascript 应用程序的静态模块打包器</li>
        <li>Vue.js 简单的脚手架命令行工具</li>
        <li>一个开发移动端和桌面端的框架</li>
        <li>跨浏览器的CSS3动画库，使用方便</li>
    </ul>
    <ul id="contain1" class="abk" name="con_list">
        <li>一个现代 JavaScript 应用程序的静态模块打包器</li>
        <li>Vue.js 简单的脚手架命令行工具</li>
        <li>一个开发移动端和桌面端的框架</li>
        <li>跨浏览器的CSS3动画库，使用方便</li>
    </ul>
    <ul id="contain2" class="abk" name="con_list">
      <li>一个现代 JavaScript 应用程序的静态模块打包器</li>
        <li>Vue.js 简单的脚手架命令行工具</li>
        <li>一个开发移动端和桌面端的框架</li>
        <li>跨浏览器的CSS3动画库，使用方便</li>
    </ul>
</div>

 

当页面只有一个需要切换时，通过以下代码就可以实现

function xunhuan() {
    var container = document.getElementById("contain");
    container.appendChild(container.firstChild);
}
setInterval("xunhuan()", 3000);

 

当页面多个切换时，实现方式有两种：

//实现方式1：
function xunhuan(){
    var total = document.getElementsByName(‘con_list‘);
    for(var i=0;i<total.length;i++){
    var contain = document.getElementsByClassName(‘abk‘);
    contain[i].appendChild(contain[i].firstChild);
    }
}
setInterval("xunhuan()", 300);


//实现方式2：
function xunhuan(){
    var elementArr = [‘contain‘,‘contain1‘,‘contain2‘,‘contain3‘,‘contain4‘,‘contain5‘]
    for(var i = 0; i<elementArr.length;i++){
    var container = document.getElementById(elementArr[i]);
    container.appendChild(container.firstChild);
    }
}
setInterval("xunhuan()", 300);

 

实现原理：

 firstChild指向元素首个子节点的引用。在xunhuan函数中，将firstChild引用指向的对象append到父对象的末尾，原来firstChild引用的对象就跳到了container对象的末尾，而firstChild就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了

参考：https://bbs.csdn.net/topics/360223721