效果:
基础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
原文:https://www.cnblogs.com/lsdk/p/8990897.html