控制多组图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> body{ 850px; } #img1{ 400px; height:300px; } #img2{ 300px; height:300px; } #a,#b{ 850px; height:40px; line-height:40px; text-align:center; } #text1,#text2{ float:left; } #text1{ 410px; } #text2{ 300px; } #title1,#title2{ float:left; } #title1{ 410px; } #title2{ 300px; } </style> <script> function $(id){//定义函数 return document.getElementById(id); } window.onload=function(){ //获取元素 var oInput1=$("input1"); var oInput2=$("input2"); var oImg1=$("img1"); var oImg2=$("img2"); var oText1=$("text1"); var oText2=$("text2"); var oTitle1=$("title1"); var oTitle2=$("title2"); //将两组图片放在两个数组里 var arr1=["http://s.qdcdn.com/cl/12312231,800,450.jpg","http://upload.mcchina.com/2015/0915/1442284510848.jpg?0.21561190602369606","http://upload.mnw.cn/2015/0818/1439867339926.jpg","http://easyread.ph.126.net/124QjuGmpY1iBwFa0MXiVA==/7916856454429909310.jpg"]; var arr2=["http://www.huanqiu.com/attachment2010/2013/0221/20130221081408663.jpg","http://upload.cbg.cn/2015/1120/1447990413976.jpg","http://jiangsu.china.com.cn/uploadfile/2013/0327/20130327085601230.jpg"]; //设置初始值 var num1=0; var num2=0; //设置第一组点击事件 oImg1.onclick=function(){ //判断条件，如果不是最后一张，则自增，如果是最后一张重新从第一张开始 if(num1==0||num1==1||num1==2){ num1++; }else if(num1==3){ num1=0; } //利用num1值，改变图片路径，对oText1和oTitle1进行填充 oImg1.src=arr1[num1]; oText1.innerHTML="<div>第一组第"+(num1+1)+"张</div>"; oTitle1.innerHTML=(num1+1)+"/4"; } //设置第二组点击事件 oImg2.onclick=function(){ //判断条件，如果不是最后一张，则自增，如果是最后一张重新从第一张开始 if(num2==0||num2==1){ num2++; }else if(num2==2){ num2=0; } //利用num2值，改变图片路径，对oText2和oTitle2进行填充 oImg2.src=arr2[num2]; oText2.innerHTML="<div>第二组第"+(num2+1)+"张</div>"; oTitle2.innerHTML=(num2+1)+"/3"; } //设置“上一组”点击事件 oInput1.onclick=function(){ //两组条件一块判断，不是第一张则自减，否则设为最后一张 if(num1==1||num1==2||num1==3){ num1--; }else if(num1==0){ num1=3; } if(num2==1||num2==2){ num2--; }else if(num2==0){ num2=2; } //根据num1和num2值不同设置图片路径及内容填充 oImg1.src=arr1[num1]; oText1.innerHTML="<div>第一组第"+(num1+1)+"张</div>"; oTitle1.innerHTML=(num1+1)+"/4"; oImg2.src=arr2[num2]; oText2.innerHTML="<div>第二组第"+(num2+1)+"张</div>"; oTitle2.innerHTML=(num2+1)+"/3"; } //设置“下一组”的点击事件 oInput2.onclick=function(){ //两组条件一块判断，不是最后一张则自增，否则设为第一张 if(num1==0||num1==1||num1==2){ num1++; }else if(num1==3){ num1=0; } if(num2==0||num2==1){ num2++; }else if(num2==2){ num2=0; } //根据num1和num2值不同设置图片路径及内容填充 oImg1.src=arr1[num1]; oText1.innerHTML="<div>第一组第"+(num1+1)+"张</div>"; oTitle1.innerHTML=(num1+1)+"/4"; oImg2.src=arr2[num2]; oText2.innerHTML="<div>第二组第"+(num2+1)+"张</div>"; oTitle2.innerHTML=(num2+1)+"/3"; } } </script> </head> <body> <div> <input type="button" value="上一组" id="input1"/> <input type="button" value="下一组" id="input2"/> </div> <div id="a"> <div id="text1">第一组第1张</div> <div id="text2">第二组第1张</div> </div> <img src="http://s.qdcdn.com/cl/12312231,800,450.jpg" id="img1"/> <img src="http://www.huanqiu.com/attachment2010/2013/0221/20130221081408663.jpg" id="img2"/> <div id="b"> <div id="title1">1/4</div> <div id="title2">1/3</div> </div> </body> </html>