該文實現效果，點擊按鈕上一張，到上一張圖片，點擊下一張，到下一張圖片。
這個之前做了兩張圖片，后來覺得演示比較少，就加了一個li最后一個li里是背景色紅色。
該文用方法是opacity的css樣式，這個樣式是用來設置元素透明度的，1代表完全不透明，0代表完全透明。
原理：把所有的li都疊放起來，點擊切換后，只有一張圖片設置成完全不透明，其他的都設置成完全透明，這樣就只顯示那個完全不透明的。首先默認展示的是第一張，所以第一張設置為不透明，其他的都透明。
疊放方法：設置父元素為position:relative，然后里面的li都position:absolute，相對於該父元素進行定位，top和left都設置成0，父元素和li都設置同樣的大小，這樣所有的元素都疊在一起了，關於這個定位，可查看本博客其他用過的相關博文：LODOP問答部分鏈接、
疊放好添加兩個按鈕，給按鈕添加對應的JS方法。
首先獲取所有的li標簽的集合，可以通過索引來使用哪個li。
索引是從0開始，到2，li標簽集合的長度是3。
首先定義一個索引變量index的初始值，這里為0，
上一張按鈕的JS方法：
索引index減去1，如果當前是第一張，索引為0,會成為-1,所以要先判斷下，如果減去1后小於了0，就把index設置為最后一張，最后一張的索引就是li的長度減去1。這里最后一張的索引為2。
然后循環每個元素，都設置成完全透明的樣式，最后再單獨修改index減去1后的新的索引的li元素變成完全不透明。
點上一張，index的索引變化：0-2,2-1,1-0,0-2如此循環，索引限制在0，1，2三個數之間。
下一張按鈕的JS方法：
索引index加上1，如果是最后一張，也就是2，那么2+1就會變成3，超出索引范圍，所以先判斷下，如果索引是大於2的，就把索引再改成第一張索引為0的。
最后同上一張按鈕，遍歷所有li都修改成完全透明不顯示狀態，把當前index設置成不透明的顯示狀態。
點下一張，index索引的變化：0-1,1-2,2-0,0-1如此循環。
測試代碼：（為了盡量簡潔，這個代碼中不帶log，圖示中代碼加上log，可以看出索引的變化范圍。）
<style> .box1{list-style-type:none;width:200px;height:100px;overflow:hidden;position:relative;} .box1 li{width:200px;height:100px;position:absolute;top:0px;left:0px;} .box1 li.now{opacity:1;}/**1代表完全不透明**/ .box1 li.others{opacity:0;}/**1代表完全透明**/ </style> </head> <body> <div class="box1"> <ul class="list1"> <li id="img1" class="now"><img src="images/img1.png"></li> <li id="img2" class="others"><img src="images/img2.png"></li> <li id="img2" class="others" style="background:red"></li> </ul> </div> <input type="button" value="上一張" onclick="pre()"><br> <input type="button" value="下一張" onclick="next()"> <script> var index=0; var lis=document.getElementsByTagName("li"); var indexlength=lis.length-1;//長度-1是最后一個的索引 function pre(){ index--; if(index<0) { index=indexlength; } for(var i=0;i<lis.length;i++) { lis[i].className="others"; } lis[index].className="now"; }; function next(){ index++; if(index>indexlength) { index=0; } for(var i=0;i<lis.length;i++) { lis[i].className="others"; } lis[index].className="now"; }; </script>
圖示：圖示中log是點四次上一張，點四次下一張的日志。
