如圖效果
原理：
大體上還是一個簡單的選項卡，但是由於上一個和下一個固定，點擊第幾下的時候，是第幾張圖片，所以，要對點擊的次數做一個定義，即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>