java 点击图片_点击图片切换

~~~

p{margin: 0px;padding: 0px;

}

#div1{

height: 400px;width: 400px;border:10px solid gainsboro;margin: 50px auto;

background-image: url(img/loader_ico.gif);background-repeat:no-repeat ;

background-position: center center; position:relative;

}

#div2{height: 40px;width: 400px;background-color: #000000;opacity: 0.5;position: absolute;top:0px;

}

#div3{height: 40px;width: 400px;background-color: #000000;opacity: 0.5;position: absolute;bottom: 0px;

}

#div4{height: 30px;width: 40px;background-color: #000000;position: absolute;top:200px;bottom: 0px;border-radius:5px;

color:white;font-size: 18px ;line-height: 30px;text-align: center;opacity: 0.7;cursor: pointer;}

#div5{height: 30px;width: 40px;background-color: #000000;position: absolute;top:200px;right: 0px;border-radius:5px;

color:white;font-size: 18px ;line-height: 30px;text-align: center;opacity: 0.7;cursor: pointer;}

#img{height: 400px;width: 400px;}

#p1{ height: 30px;width: 40px; position: absolute; top:3px; left:180px;color: white;

line-height:30px ;text-align: center;}

#p2{ height: 30px;width: 40px; position: absolute; bottom:3px; left:180px; color: white;

line-height:30px ;text-align: center;}

window.οnlοad=function(){

var oId=document.getElementById("id");

var oImg=document.getElementById("img");

var oDiv2=document.getElementById("div2");

var oDiv3=document.getElementById("div3");

var oDiv4=document.getElementById("div4");

var oDiv5=document.getElementById("div5");

var num=0;

var mg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];

var ajj=['唐僧','猴子','八戒','和尚'];

oImg.src=mg[0];

p1.innerHTML=ajj[0]

p2.innerHTML=1+'/'+mg.length;

oDiv5.οnclick=function(){

num++;

oImg.src=mg[num];

p1.innerHTML=ajj[num]

p2.innerHTML=(num+1)+'/'+mg.length;

if(num==3){

num=-1;

}

}

oDiv4.οnclick=function(){

num--;

if(num==-1){

num=mg.length-1;

}

oImg.src=mg[num];

p1.innerHTML=ajj[num]

p2.innerHTML=(num+1)+'/'+mg.length;

}

}

<

>

~~~