parent.appendChild(parent.firstChild)，不断的把列表的一个元素添加到最后一个，appendChild会将节点从原来的位置移除，所以借此可以产生切换效果。

一点，IE对文本的文本节点与其他的浏览器不同，在获取子节点的时候需要注意，另外在不同版本的FF中，children这个属性也需要注意。

下面的demo没有设置#view的overflow:hidden。

*{ padding: 0; margin: 0; }

li { list-style: none; }

.box {

width: 800px;

height: 450px;

margin: 50px auto;

position: relative;

overflow:hidden;

}

.box span {

width: 40px;

height: 60px;

display: block;

position: absolute;

top: 225px;

margin-top: -20px;

cursor: pointer;

z-index: 1;

}

.box #left {

width: 76px;

height: 112px;

background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat left 0;

left: 0;

margin-top: -66px;

display: none;

}

.box #right {

width: 76px;

height: 112px;

background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat right 0;

right: 0;

margin-top: -66px;

display: none;

}

.box #txt {

width: 100%;

height: 30px;

background-color: #000;

opacity: 0.4;

position: absolute;

bottom: 0;

color: #fff;

line-height: 30px;

text-align: center;

}

#ad {

width: 4000px;

height: 450px;

position: absolute;

left: -1600px;

}

#ad li {

float: left;

}

.box #left:hover {

background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat left -112px;

}

.box #right:hover {

background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat right -112px;

}

window.onload = function(){

function $(id){ return document.getElementById(id);}

var aLi = $("ad").children;

function animate(obj,target,arrt){

//关闭上一个定时器

clearInterval(obj.timer);

$("txt").innerHTML = obj.children[0].children[0].alt;

//管理定时器

obj.timer = setInterval(function(){

//移动步长

var step = (target - obj.offsetLeft) / 10;

//步长取整

step = step > 0? Math.ceil(step):Math.floor(step);

//移动盒子 ： 盒子位置 + 步长

obj.style.left = obj.offsetLeft + step+ "px";

//关闭定时器

if(obj.offsetLeft%800 ==0){

clearInterval(obj.timer);

//判断点击的方向

if(arrt === "left"){

var oLi = $("ad").children[aLi.length - 1].cloneNode(true);

//添加到最前面

obj.insertBefore(oLi,obj.children[0]);

//删除最后一个盒子

obj.removeChild(obj.children[aLi.length - 1]);

//让ul恢复初始值

obj.style.left = "-1600px";

}else{

//克隆第一个盒子

var oLi = obj.children[0].cloneNode(true);

//添加到最后面

obj.appendChild(oLi);

//删除第一个盒子

obj.removeChild(obj.children[0]);

//让ul恢复初始值

obj.style.left = "-1600px";

}

}

},20);

}

var timer = setInterval(autoplay,2000);

function autoplay(){

animate($("ad"),-2400,"right");

}

$("ad").parentNode.onmouseover = function(){

clearInterval(timer);

$("left").style.display = "block";

$("right").style.display = "block";

}

$("ad").parentNode.onmouseout = function(){

$("left").style.display = "none";

$("right").style.display = "none";

timer = setInterval(autoplay,2000);

}

$("left").onclick = function(){

clearInterval(timer);

animate($("ad"),-800,"left");

}

$("right").onclick = function(){

clearInterval(timer);

animate($("ad"),-2400,"right");

}

}

泪光点点，娇喘微微

关键词： JavaScript实现幻灯片的简单实例是什么 原生JS实现幻灯片是什么 简单的javascript实例 javascript实例教学