效果图如下:
代码如下:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<style> | |
*{margin: 0;padding: 0;} | |
body{ | |
background: #333; | |
} | |
.box{ | |
width: 800px; | |
height: 500px; | |
border: 1px solid #000000; | |
background: url(img/bg.jpg) no-repeat; | |
background-size: 100% 100%; | |
padding-top:40px ; | |
padding-left: 30px; | |
box-sizing: border-box; | |
margin: 50px auto; | |
} | |
.box .btn{ | |
margin-bottom: 10px; | |
} | |
.box .btn input{ | |
width: 80px; | |
height: 20px; | |
background: rgba(220,200,230,0,5); | |
border: 1px solid #666; | |
border-radius: 5px; | |
} | |
img{ | |
vertical-align: top; | |
border:none; | |
} | |
input{ | |
padding: 0; | |
border: none; | |
} | |
.box .cont{ | |
} | |
.div1{position: relative;} | |
.div2{position: relative;} | |
.div1,.div2{ | |
float: left; | |
background: #fff; | |
padding: 20px; | |
} | |
#f-search1,#f-search2, | |
#s-search1,#s-search2{ | |
position: absolute; | |
width: 50%; | |
height: 300px; | |
top: 20px; | |
} | |
#f-search1,#s-search1{ | |
left: 20px; | |
} | |
#f-search2,#s-search2{ | |
right: 20px; | |
} | |
.div1{ | |
margin-right: 40px; | |
} | |
.div1 img{ | |
width: 400px; | |
height: 300px; | |
} | |
.div2 img{ | |
width: 220px; | |
height: 300px; | |
} | |
.div1 p,.div2 p{ | |
font: bold 14px/30px "宋体"; | |
letter-spacing: 3px; | |
color: #333; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="box"> | |
<form class="btn"> | |
<input id="btn1" type="button" value="上一组"> | |
<input id="btn2" type="button" value="下一组"> | |
</form> | |
<div class="cont" id="cont"> | |
<div class="div1"> | |
<img src="img/small.jpg"> | |
<p>第一组第一张</p> | |
<span>1/4</span> | |
<div id="f-search1"></div> | |
<div id="f-search2"></div> | |
</div> | |
<div class="div2"> | |
<img src="img/small-04.jpg"> | |
<p>第二组第一张</p> | |
<span>1/3</span> | |
<div id="s-search1"></div> | |
<div id="s-search2"></div> | |
</div> | |
</div> | |
</div> | |
<script> | |
var oBtn1=document.getElementById('btn1'); | |
var oBtn2=document.getElementById('btn2'); | |
var oDiv=document.getElementById('cont'); | |
var aImg=oDiv.getElementsByTagName('img'); | |
var aSpan=oDiv.getElementsByTagName('span'); | |
var aP=oDiv.getElementsByTagName('p'); | |
var num1=0;//存放数字 | |
var num2=0;//存放数字 | |
var arrUrl1=["img/img1/belle.jpg","img/img1/city.jpg","img/img1/flower.jpg","img/img1/rouse.jpg","img/img1/smail.jpg"]; | |
var arrUrl2=["img/img2/load.jpg","img/img2/pencil.jpg","img/img2/watch.jpg","img/img2/water.jpg"]; | |
var oText1=["第一组第1张","第一组第2张","第一组第3张","第一组第4张","第一组第5张"]; | |
var oText2=["第二组第1张","第二组第2张","第二组第3张","第二组第4张"]; | |
var limgL = document.getElementById("f-search1"); | |
var limgR = document.getElementById("f-search2"); | |
var rimgL = document.getElementById("s-search1"); | |
var rimgR = document.getElementById("s-search2"); | |
limgL.onclick=function(){ | |
num1--; | |
if(num1<0){ | |
alert("这已经是第一张图片了,不能再往前了!"); | |
num1=0; | |
} | |
Tab(); | |
} | |
limgR.onclick=function(){ | |
num1++; | |
if(num1>arrUrl1.length-1){ | |
alert("这已经是最后一张图片了,不能再往后了!"); | |
num1=arrUrl1.length-1; | |
} | |
Tab(); | |
} | |
rimgL.onclick=function(){ | |
num2--; | |
if(num2<0){ | |
num2=arrUrl2.length-1; | |
} | |
Tab(); | |
} | |
rimgR.onclick=function(){ | |
num2++; | |
if(num2>arrUrl2.length-1){ | |
num2=0; | |
} | |
Tab(); | |
} | |
function Tab(){ | |
aImg[0].src=arrUrl1[num1]; | |
aImg[1].src=arrUrl2[num2]; | |
aP[0].innerHTML=oText1[num1]; | |
aP[1].innerHTML=oText2[num2]; | |
aSpan[0].innerHTML=num1+1+' / '+arrUrl1.length; | |
aSpan[1].innerHTML=num2+1+' / '+arrUrl2.length; | |
} | |
Tab(); | |
oBtn2.onclick=function(){ | |
num1++; | |
num2++; | |
if (num1==arrUrl1.length) { | |
num1=0; | |
}; | |
if (num2==arrUrl2.length) { | |
num2=0; | |
}; | |
Tab(); | |
} | |
oBtn1.onclick=function(){ | |
num1--; | |
num2--; | |
if (num1==-1) { | |
num1=arrUrl1.length-1; | |
}; | |
if (num2==-1) { | |
num2=arrUrl2.length-1; | |
}; | |
Tab(); | |
} | |
</script> | |
</body> | |
</html> |