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

在我们之前的一篇文章中,我们给大家介绍了关于JavaScript实现幻灯片的实例,详细对此大家都有所认识,今天我们继续给大家介绍如何使用JavaScript原生代码来实现幻灯片的实例。

效果如下:

a8e1c4bd470ff7af4d2010af73527d3c.png

代码如下:

*{ 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原生代码实现幻灯片的代码,小伙伴们可以仔细的阅读与学习,在你工作需要的时候,你可以用来借鉴一下,有抛砖引玉的效果!

相关推荐:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值