20行js代码实现网页轮播图效果 |
您所在的位置：网站首页 › 轮播图的js代码 › 20行js代码实现网页轮播图效果 |
|
20行js代码实现网页轮播图效果（2020年12月11日）
制作背景
大二上学期临近期末，网页课上讲到了js制作轮播图，对课上的js代码进行了适当简化和调整。 效果图 静态图 动态图当前功能是：网页轮播图在自动切换的同时还可以手动切换 源代码 picplay #divout { max-width: 1000px; position: relative; margin: 0 auto; } .imgdiv img { width: 100%; } .imgdiv { display: none; } .dotdiv { text-align: center; position: absolute; width: 100%; bottom: -30px; } .dot { width: 16px; height: 16px; display: inline-block; background: #bbbbbb; border-radius: 10px; margin: 0 12px; } .title { font-size: 18px; color: #f2f2f2; position: absolute; text-align: center; font-weight: 700; width: 100%; bottom: 10px; } .active { background-color: #717171; } #arrow { position: absolute; top: 50%; margin-top: -30px; width: 100%; opacity: .3; transition: opacity 2s; } #divout:hover #arrow { opacity: .9; } #arrow img { cursor: pointer; } .imgdiv { animation: fade 1.5s; } @keyframes fade { from { opacity: .3; } to { opacity: 1; } } 标题文本1 标题文本2 标题文本3 标题文本4 var imgIndex = 0; var imgDivArr = document.getElementsByClassName("imgdiv"); var dotArr = document.getElementsByClassName("dot"); /** * 播放图片 * 参数r：是否正放，若为true，正放。若为false，倒放 */ function picplay(r) { for (let i = 0; i < imgDivArr.length; i++) { imgDivArr[i].style.display = "none"; dotArr[i].className = "dot"; } if (r) { imgIndex++; imgIndex = (imgIndex >= imgDivArr.length) ? 0 : imgIndex; } else { imgIndex--; imgIndex = (imgIndex < 0) ? imgDivArr.length - 1 : imgIndex; } imgDivArr[imgIndex].style.display = "block"; dotArr[imgIndex].className = "dot active"; } setInterval(picplay, 3000, true); 使用方法 将此段代码保存到一个html文件中 在html文件旁边新建一个文件夹命名 images 将6张图片保存到 images 文件夹中，命名要和html代码中命名保持一致 图片素材 timg1.jpg timg2.jpg timg3.jpg timg4.jpg arrow-l.png arrow-r.png 总结此轮播图的实现逻辑较为简单，图片的切换方式只是简单的淡化效果，而复杂的轮播图切换效果可能是左右滑动。 在逻辑上有待所改进，比如：在点击后，自动切换时间将会延迟一秒，这样能避免恰好点击时刻在自动切换的那一刹那之前导致一下子跨越了一个图片。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |