标签：
如图效果
原理：
大体上还是一个简单的选项卡，但是由于上一个和下一个固定，点击第几下的时候，是第几张图片，所以，要对点击的次数做一个定义，即iNum;同时，点击“下一个”的时候，点击的次数要依次递增，如果点击的次数大于等于图片的个数的时候，要回归到第一张图片；点击“上一个”的时候，点击的次数要依次递减iNum可能会0；为0的时候，为第一张图片，那么在递减一下，iNum就为负数了，而这个负数其实就应该让图片回归到最后一张图片，最后一张图片的下标就是全部图片的个数-1
代码如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>点击上一个为上一张图片，点击一个下一个图片</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 #box{width: 500px;height: 200px;margin: 100px auto 0;overflow: hidden;} 9 #box li{width: 100%;height: 200px;text-align: center;line-height: 200px;background: red;color: #fff;font-size: 50px;display: none;} 10 #next,#prev{position: absolute;top: 340px;left: 50%;width: 100px;} 11 #next{margin-left: 150px;} 12 #prev{margin-left: -250px;} 13 </style> 14 </head> 15 <body> 16 <ul id="box"> 17 <li>这个是第1个</li> 18 <li>这个是第2个</li> 19 <li>这个是第3个</li> 20 <li>这个是第4个</li> 21 </ul> 22 <input id="next" type="button" value="下一个"> 23 <input id="prev" type="button" value="上一个"> 24 </body> 25 <script type="text/javascript"> 26 window.onload=function(){ 27 var oUl=document.getElementById(‘box‘); 28 var aLi=oUl.getElementsByTagName(‘li‘); 29 var Prev=document.getElementsByTagName(‘input‘)[0]; 30 var Next=document.getElementsByTagName(‘input‘)[1]; 31 aLi[0].style.display=‘block‘; 32 var iNum=0; 33 Prev.onclick=function(){ 34 iNum++; 35 if(iNum>=aLi.length){ 36 iNum=0; 37 } 38 for(i=0;i<aLi.length;i++){ 39 aLi[i].style.display=‘none‘; 40 } 41 aLi[iNum].style.display=‘block‘; 42 43 } 44 Next.onclick=function(){ 45 iNum--; 46 47 if(iNum<0){ 48 iNum=aLi.length-1; 49 /*alert(iNum);*/ 50 } 51 52 for(i=0;i<aLi.length;i++){ 53 aLi[i].style.display=‘none‘; 54 } 55 aLi[iNum].style.display=‘block‘; 56 } 57 58 59 } 60 </script> 61 </html>
标签：
原文地址：http://www.cnblogs.com/zhangjingyun/p/4546005.html
