点击上一个为上一张图片，点击下一个为下一张图片

时间：2022-11-28 22:19:09

如图效果

 

点击上一个为上一张图片，点击下一个为下一张图片

原理：

大体上还是一个简单的选项卡，但是由于上一个和下一个固定，点击第几下的时候，是第几张图片，所以，要对点击的次数做一个定义，即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>

 

标签：

相关文章