在我們之前的一篇文章中，我們給大家介紹了關于JavaScript實現幻燈片的實例，詳細對此大家都有所認識，今天我們繼續給大家介紹如何使用JavaScript原生代碼來實現幻燈片的實例。

效果如下：

代碼如下：

*{ 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原生代碼實現幻燈片的代碼，小伙伴們可以仔細的閱讀與學習，在你工作需要的時候，你可以用來借鑒一下，有拋磚引玉的效果！

相關推薦：

總結

以上是生活随笔為你收集整理的php写幻灯片,JavaScript原生代码实现幻灯片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。