html+img下一张,js 图片切换代码(上一张、下一张) 历史图库

【实例简介】

【实例截图】

【核心代码】

无标题文档

*{margin:0;padding:0}

#box1{width:400px;height:200px; position:relative;margin:50px auto; overflow:hidden;}

#box1 ul{width:1600px;height:200px; position: absolute;top:0;left:0; -webkit-transition:1s all ease;}

#box1 ul li{width:400px;height:200px; background:yellow; font-size:100px; color:#fff; float:left;}

#box2{ text-align:center;}

#box2 span{padding:20px; background:red; cursor:pointer; color:#FFF;}

window.οnlοad=function()

{

var oBox1=document.getElementById('box1');

var oUl=oBox1.children[0];

var aLi=oUl.children;

var aBtn=document.getElementsByTagName('span');

//下一个

var iNow=0;

aBtn[1].οnclick=function()

{

iNow ;

if(iNow==aLi.length)iNow=0;

var l=-iNow*400;

oUl.style.left=l 'px';

};

//上一个

aBtn[0].οnclick=function()

{

iNow--;

if(iNow==-1)iNow=aLi.length-1; //负一 最后一个 length-1;

var l=-iNow*400;

oUl.style.left=l 'px';

};

};

• 
• 
• 
• 

上一张

下一张