js代码：轮播图的简单实现

今天药忘吃喽~ 2023-02-25 07:08 21阅读 0赞

轮播图的实现其实就是一个个图片的透明度的调整，把要显示的图片透明度设为1，其他的都设为0，这里我用的是dom操作配合使用。  
1：编写html的代码，把几个div和图片放进去：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70]  
2：编写css的样式：  
body,ul,li\{  
margin: 0;  
padding: 0;  
list-style: none;  
\}  
.box\{  
width: 610px;  
height: 260px;  
margin: 100px auto;  
position: relative;  
border: 3px solid \#ccc;  
\}  
li\{  
width: 100%;  
height: 100%;  
position: absolute;  
text-align: center;  
margin-top:5px ;  
opacity: 0;  
transition: 1s;  
\}  
img\{  
width: 600px;  
height: 250px;  
\}  
li:first-child\{  
opacity: 1;  
\}  
.btn\{  
width: 60px;  
height: 30px;  
background: rgba(0,0,0,0.5);  
position: absolute;  
color: \#fff;  
font-size: 35px;  
text-align: center;  
line-height: 30px;  
margin-top: 130px;  
margin-left: 5px;  
cursor: pointer;  
\}  
\#next\{  
right: 5px;  
\}  
.btn:hover\{  
background: rgba(0,0,0,0.9);  
\}  
3：分步实现js的效果：  
1：把各个id，标签找出来，并且设置图片的下标，和定时器  
2：把时间定时器写出来，这个比较容易，  
var stop=setInterval(show,2000);  
3：show方法的编写：我们每次调用一次定时器时，它的下标就会往下走一个，所以index++; 之后再把所有图片的透明度设置为0；  
并且把当前图片的透明度设置为1，如果下标为图片的长度时，让其等于0；具体实现如下：  
![在这里插入图片描述][20200710183956248.png]  
4：然后设置鼠标放上和移开的停止和开始，就是停止时间器和开始  
![在这里插入图片描述][20200710184059754.png]  
5：点击下一个和上一个的设置：上一个和自动播放几乎一样，点击事件按钮：定义下标减减，所有的设置为0，当前的设置为1，等于-1时，让其等于数组长度-1。  
![在这里插入图片描述][20200710184313654.png]  
6;下一个的按钮事件：  
同理：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70]: /images/20230209/ae2fee0eae88484da490bbf5a87a1ea0.png
[20200710183956248.png]: https://img-blog.csdnimg.cn/20200710183956248.png
[20200710184059754.png]: https://img-blog.csdnimg.cn/20200710184059754.png
[20200710184313654.png]: https://img-blog.csdnimg.cn/20200710184313654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200710184349278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA==,size_16,color_FFFFFF,t_70