码迷,mamicode.com
首页 > 其他好文 > 详细

文本定时变动

时间:2018-05-04 17:12:17      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:end   文本   分享   .net   ima   i++   element   简单的   append   

效果:

 技术分享图片

基础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

文本定时变动

标签:end   文本   分享   .net   ima   i++   element   简单的   append   

原文地址:https://www.cnblogs.com/lsdk/p/8990897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!