轮播图详细制作思路与过程

2024-07-13 15:28| 来源: 网络整理| 查看: 265

轮播图详细制作思路与过程

图片轮播我们经常在众多网站中看到，各种轮播特效有着非常美观炫酷的视觉效果。很多初学js的小伙伴都很心生向往。我也不例外，所以在此分享个写轮播图的思路和过程，有不足之处请多多指教，相互学习。

一.轮播图制作思路：

就是通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种图片轮流播放的效果。思路比较简单： 1.首先让一组图片绝对定位，让其重叠在一起， 2.通过js获取相应的标签,为后面的步骤做铺垫 3、然后制作手动轮播：点击小方块按钮，显示相应图片。（1）通过设置图片的透明度变化来控制图片的显示效果。（更简单的效果是直接修改display属性，用display:block让该图片显示出来,而设置display:none就可以把其他的图片隐藏起来，这两种方法原理相同。）（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色； 4、点击左右箭头，实现向前向后轮播图片。

二.具体代码实现

首先来看Html结构代码：

1 2 3 4 5 prev next

对其进行样式调整之后，图片都在同一个位置，可以先给第一图片设置为显示，其它的图片设为不显示。

下面来看js的代码：

*{ padding: 0; margin: 0; } /* 长按标签会有蓝色背景 */ *::selection { background: none; } li{ list-style: none; } /* 子绝父相 */ .box{ width: 800px; height: 500px; margin: 50px auto; position: relative; } /* 设置所有的图片不显示 */ .box ul li { width: 800px; height: 500px; position: absolute; opacity: 0; /* 过度显示图片 */ transition: all .8s; } /* 设置第一张图片可见 */ .box ul li:first-child { opacity: 1; } /*左右箭头*/ .prev, .next { width: 80px; height: 40px; position: absolute; /* 背景色 */ background-color: rgba(0, 0, 0, .7); /* 文字设置 */ color: white; text-align: center; line-height: 40px; /* 位置 */ top: 50%; margin-top: -20px; /* 鼠标移上去的效果 */ cursor: pointer; } .next{ right: 0; } .prev:active, .next:active { background-color: rgba(0, 0, 0, .5); } .prev:hover, .next:hover{ background-color: rgba(0, 0, 0, .6); } /* 小方块的位置 */ .box ol{ position: absolute; right: 50px; bottom: 20px; } .box ol li { width: 20px; height: 20px; border: 1px solid #ccc; float: left; text-align: center; line-height: 20px; cursor: pointer; } .current{ background-color: yellow; } img{ width: 800px; height: 500px; }

js的具体代码如下：

//1.1获取ul元素 var boxul = document.getElementById("boxul") var lis = boxul.querySelectorAll("li") console.log(lis.length); //1.2获取ol var boxol = document.getElementById("boxol") //获取Ol下面的li var ol_lis = boxol.querySelectorAll("li") //console.log(ol_lis); //获得箭头 var prev = document.getElementById("prev") var next = document.getElementById("next") //给ol的li添加点击事件 for(var i = 0 ;i

【本文地址】

公司简介

联系我们