JS点击上一张下一张轮播li标签1

2021年09月15日 阅读数:2
这篇文章主要向大家介绍JS点击上一张下一张轮播li标签1,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

该文实现效果,点击按钮上一张,到上一张图片,点击下一张,到下一张图片。
这个以前作了两张图片,后来以为演示比较少,就加了一个li最后一个li里是背景色红色。css

该文用方法是opacity的css样式,这个样式是用来设置元素透明度的,1表明彻底不透明,0表明彻底透明。
原理:把全部的li都叠放起来,点击切换后,只有一张图片设置成彻底不透明,其余的都设置成彻底透明,这样就只显示那个彻底不透明的。首先默认展现的是第一张,因此第一张设置为不透明,其余的都透明。html

叠放方法:设置父元素为position:relative,而后里面的li都position:absolute,相对于该父元素进行定位,top和left都设置成0,父元素和li都设置一样的大小,这样全部的元素都叠在一块儿了,关于这个定位,可查看本博客其余用过的相关博文:LODOP问答部分连接测试

叠放好添加两个按钮,给按钮添加对应的JS方法。
首先获取全部的li标签的集合,能够经过索引来使用哪一个li。
索引是从0开始,到2,li标签集合的长度是3。spa

首先定义一个索引变量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如此循环。code

测试代码:(为了尽可能简洁,这个代码中不带log,图示中代码加上log,能够看出索引的变化范围。)htm

 <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是点四次上一张,点四次下一张的日志。blog