如图效果
原理：
大体上还是一个简单的选项卡，但是由于上一个和下一个固定，点击第几下的时候，是第几张图片，所以，要对点击的次数做一个定义，即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>
时间： 2024-08-13 09:30:47