效果图如下：
代码如下：
| <!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> |