使用原生js实现轮播效果

时间：2023-03-30 13:58:28 CSS

知乎原文我的博客微信公众号这几天逛网站，发现很多网站都有轮播的效果，于是就模仿小米官网，用原生js写的一个轮播图片效果，希望大家喜欢。这是我在github上贴出的最终效果：https://heternally.github.io/...下面简单说一下实现这个效果的过程。如果有什么不对的地方，请告诉我出来，以便大家互相学习。上面简单的html+css相信大家应该都知道，这里就不多说了，简单给大家看一下代码：HTML部分

css部分*{margin:0;填充：0；}#wrap{位置：相对；边距：20px自动；宽度：1226px；高度：460px;}#wrap.banner{位置：绝对;顶部：0；宽度：100%；高度：100%；不透明度：0；过渡：不透明度2s；}#wrap.tab{位置：绝对；底部：10px；right:10px;}#wrap.tabspan{display:inline-block;宽度：6px；高度：6px；边距：3px；背景：RGBA（105,105,105,0.5）；边界半径：50%；游标：指针；边框：2px实心#887B6E；}#wrap.tabspan.on{背景：#E2CEB7;}#wrap.tabspan:hover{背景：#E2CEB7;}#wrap.prev{位置：绝对；左：20px；顶部：210px；宽度：41px；高度：69px；背景:url("images/icon-slides.png")82px;光标：指针；}#wrap.prev:hover{background:url("images/icon-slides.png");}#wrap.next{position:absolute;右：20px；顶部：210px；宽度：41px；高度：69px；背景：url("images/icon-slides.png")41px；cursor:pointer;}#wrap.next:hover{background:url("images/icon-slides.png")123px;}上面的代码很简单，随便看看现在，我们开始关注js部分.首先，我将通过类名和ID等方法获取每个节点：“tab”）[0].getElementsByTagName（“span”）；varoNext=document.getElementsByClassName（“next”）[0]；varOprev=document.getElementsByClassName（“prev”）[0]；varOon=文档。getElementsByClassName("on")[0];接下来是初始化界面，因为我在css中设置了图片的不透明度：0；所以我做第一张图显示第一个小圆点的颜色是白色：aBanner[0].style.opacity="1";aSpan[0].className="on";varnum=0;然后设置上一个，后一个，实现小圆点的按钮效果，点击小圆点，会显示对应的图片，点击上一个，会显示上一张图片；后一个的效果是一样的：for(vari=0;i4）{j=0;aSpan[j].className="on";aBanner[j].style.opacity="1";}}}Oprev.onclick=function(){//点击图片切换到上一张for(varj=0;j

上一篇：安卓手机输入类型为日期，下拉箭头隐藏

下一篇：使用CSS实现逼真的水波纹点击效果

使用原生js实现轮播效果相关文章