php写幻灯片,JavaScript原生代码实现幻灯片

最新推荐文章于 2023-04-06 23:15:58 发布

夏洛喵

最新推荐文章于 2023-04-06 23:15:58 发布

阅读量247

点赞数

文章标签： php写幻灯片

本文介绍了一种使用JavaScript实现幻灯片效果的方法。代码包括CSS样式和JavaScript函数，通过设置定时器自动切换幻灯片，并在鼠标悬停时显示左右导航按钮，点击按钮可手动切换。幻灯片具有图片平移和按钮交互功能。

摘要由CSDN通过智能技术生成

在我们之前的一篇文章中，我们给大家介绍了关于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原生代码实现幻灯片的代码，小伙伴们可以仔细的阅读与学习，在你工作需要的时候，你可以用来借鉴一下，有抛砖引玉的效果！